I cannot find any examples of how to do this, but how can I add a box shadow only to the top and bottom of an element?
-
2Duplicate of many other questions about having box shadows in only specific sides of a box (see Related column ->)– BoltClockJul 12, 2011 at 21:29
-
1This Fiddle may be of use for some.– L84Sep 3, 2013 at 1:35
-
With multiple shadows : stackoverflow.com/a/20596554/1491212 You may want to adapt it for top/bottom but you'll get the gist– Armel LarcierJan 20, 2014 at 13:07
-
@BoltClock but I want box shadows outsite, not inset– huykon225Jan 15, 2018 at 2:39
5 Answers
As Kristian has pointed out, good control over z-values will often solve your problems.
If that does not work you can take a look at CSS Box Shadow Bottom Only on using overflow hidden to hide excess shadow.
I would also have in mind that the box-shadow property can accept a comma-separated list of shadows like this:
box-shadow: 0px 10px 5px #888, 0px -10px 5px #888;
This will give you some control over the "amount" of shadow in each direction.
Have a look at http://www.css3.info/preview/box-shadow/ for more information about box-shadow.
Hope this was what you were looking for!
-
2If someone is looking at how to set INSET box-shadow from a single direction, here are the CSS templates you can use. TOP-ONLY
inset 0px 8px 6px -6px #888
| RIGHT-ONLYinset -8px 0px 6px -6px #888
| BOTTOM-ONLYinset 0px -8px 6px -6px #888
| LEFT-ONLYinset 8px 0px 6px -6px #888
Oct 22, 2021 at 18:03
After some experimentation I found that a fourth value in the line controls the spread (at least in FF 10). I opposed the vertical offsets and gave them a negative spread.
Here's the working pen: http://codepen.io/gillytech/pen/dlbsx
<html>
<head>
<style type="text/css">
#test {
width: 500px;
border: 1px #CCC solid;
height: 200px;
box-shadow:
inset 0px 11px 8px -10px #CCC,
inset 0px -11px 8px -10px #CCC;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
This works perfectly for me!
-
2This just results in two inset box shadows. Am I missing something? May 5, 2012 at 4:57
-
6this is a hack-free and clean solution. should be marked as the right one IMHO. (although the current selected answer mentions this).– yogeeJun 4, 2013 at 7:42
-
3@yogee I love how you call two shadows with negative spreads and carefully adjusted positions a "hack-free solution" :-)– antoineApr 10, 2015 at 5:57
-
4@Antoine - ...because it is. That is the spec and values specifically allowed by the spec...he's just adjusting the parameters to the effect desired. How on earth is that a "hack"? Oct 25, 2015 at 23:00
-
1This is exactly the missing component I needed for simulating a box shadow for a <tr> (it has to be simulated, since the shadow only shows on <td>s; using the technique here to form the middle <td>s, and then using variants for the first and last, works perfect). Jul 11, 2016 at 14:49
So this is my first answer here, and because I needed something similar I did with pseudo elements for 2 inner shadows, and an extra DIV for an upper outer shadow. Don't know if this is the best solutions but maybe it will help someone.
HTML
<div class="shadow-block">
<div class="shadow"></div>
<div class="overlay">
<div class="overlay-inner">
content here
</div>
</div>
</div>
CSS
.overlay {
background: #f7f7f4;
height: 185px;
overflow: hidden;
position: relative;
width: 100%;
}
.overlay:before {
border-radius: 50% 50% 50% 50%;
box-shadow: 0 0 50px 2px rgba(1, 1, 1, 0.6);
content: " ";
display: block;
margin: 0 auto;
width: 80%;
}
.overlay:after {
border-radius: 50% 50% 50% 50%;
box-shadow: 0 0 70px 5px rgba(1, 1, 1, 0.5);
content: "-";
display: block;
margin: 0 auto;
position: absolute;
bottom: -65px;
left: -50%;
right: -50%;
width: 80%;
}
.shadow {
position: relative;
width:100%;
height:8px;
margin: 0 0 -22px 0;
-webkit-box-shadow: 0px 0px 50px 3px rgba(1, 1, 1, 0.6);
box-shadow: 0px 0px 50px 3px rgba(1, 1, 1, 0.6);
border-radius: 50%;
}
I've played around with it and I think I have a solution. The following example shows how to set Box-Shadow so that it will only show a shadow for the inset top and bottom of an element.
Legend: insetOption leftPosition topPosition blurStrength spreadStrength color
Description
The key to accomplishing this is to set the blur value to <= the negative of the spread value (ex. inset 0px 5px -?px 5px #000; the blur value should be -5 and lower) and to also keep the blur value > 0 when subtracted from the primary positioning value (ex. using the example from above, the blur value should be -9 and up, thus giving us an optimal value for the the blur to be between -5 and -9).
Solution
.styleName {
/* for IE 8 and lower */
background-color:#888; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#FFFFCC, offX=0, offY=0, positive=true);
/* for IE 9 */
box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);
/* for webkit browsers */
-webkit-box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);
/* for firefox 3.6+ */
-moz-box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);
}
-
Firefox 33.1.1 states these are incorrect property values on labels. Whether I use box-shadow or -moz-box-shadow, I cannot simulate the fundamental tenant of your solution, which is to use negative blur values.– JonDec 11, 2014 at 22:07
essentially the shadow is the box shape just offset behind the actual box. in order to hide portions of the shadow, you need to create additional divs and set their z-index above the shadowed box so that the shadow is not visible.
If you'd like to have extremely specific control over your shadows, build them as images and created container divs with the right amount of padding and margins.. then use the png fix to make sure the shadows render properly in all browsers
-
1Is this possible though when using a seamless background behind the box(es)? If I add another box and give it a bg color, it won't look right because the patterned bg won't appear.– CofeyJul 12, 2011 at 21:36
-