CSS Box Shadow - Top and Bottom Only

Question

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?

Duplicate of many other questions about having box shadows in only specific sides of a box (see Related column ->) — BoltClock, Jul 12 '11 at 21:29
[This Fiddle](http://jsfiddle.net/masondesu/FsnnZ/) may be of use for some. — L84, Sep 03 '13 at 01:35
With multiple shadows : http://stackoverflow.com/a/20596554/1491212 You may want to adapt it for top/bottom but you'll get the gist — Armel Larcier, Jan 20 '14 at 13:07

score 191 · Accepted Answer · edited Aug 18 '20 at 09:37

191

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!

edited Aug 18 '20 at 09:37

Community

1
1

answered Jul 12 '11 at 22:18

Teodor

3,346
2
21
16

6

If 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-ONLY `inset -8px 0px 6px -6px #888` | BOTTOM-ONLY `inset 0px -8px 6px -6px #888` | LEFT-ONLY `inset 8px 0px 6px -6px #888` – Alan Jereb Oct 22 '21 at 18:03

score 117 · Answer 2 · edited Aug 21 '14 at 12:34

117

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!

edited Aug 21 '14 at 12:34

idmean

14,540
9
54
83

answered Apr 14 '12 at 04:05

gillytech

3,595
2
27
44

2

This just results in two inset box shadows. Am I missing something? – Jake Wilson May 05 '12 at 04:57
@Jakobud This was the basis of the original question... How to add inset box shadows on just the top and bottom of the div. Was I missing something? – gillytech Jun 13 '12 at 00:34
7

this is a hack-free and clean solution. should be marked as the right one IMHO. (although the current selected answer mentions this). – yogee Jun 04 '13 at 07:42
3

@yogee I love how you call two shadows with negative spreads and carefully adjusted positions a "hack-free solution" :-) – antoine Apr 10 '15 at 05: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"? – Jimbo Jonny Oct 25 '15 at 23:00
1

This is exactly the missing component I needed for simulating a box shadow for a (it has to be simulated, since the shadow only shows on s; using the technique here to form the middle s, and then using variants for the first and last, works perfect). – Macneil Shonle Jul 11 '16 at 14:49

score 5 · Answer 3 · edited Feb 16 '18 at 17:02

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%;
}

score 3 · Answer 4 · edited Oct 14 '11 at 21:10

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. — Jon, Dec 11 '14 at 22:07

Kristian · Answer 5 · 2011-07-12T22:04:55.137

0

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

edited Jul 12 '11 at 22:04

answered Jul 12 '11 at 21:28

Kristian

21,204
19
101
176

1

Is 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. – Cofey Jul 12 '11 at 21:36
as far as I know, that wouldn't work. – Kristian Jul 12 '11 at 22:03

CSS Box Shadow - Top and Bottom Only

5 Answers5

Linked