40

I want to have box-shadow on three sides of a div (except top side). How could I do that?

user1117313
  • 1,923
  • 9
  • 26
  • 36
  • It's a dupe, but this one has a better answer in my opinion. Can they be merged? –  May 31 '13 at 19:52

6 Answers6

43

Here's a JS Fiddle for you, it only uses one single div to work.

#shadowBox {
    background-color: #ddd;
    margin: 0px auto;
    padding: 10px;
    width: 220px;
    box-shadow: 0px 8px 10px gray, 
        -10px 8px 15px gray, 10px 8px 15px gray;
}

You set a shadow on the bottom, bottom left, and bottom right. With soft shadows it gets a bit tricky but it is doable. It just needs a bit of guesswork to decrease the middle shadow's blur radius, so that it looks seamless and not too dark when it overlaps with the side shadows.

kapa
  • 77,694
  • 21
  • 158
  • 175
Chris C
  • 2,003
  • 15
  • 18
  • 3
    couldn't you get the same effect just by adjusting the y position of 1 box shadow? – Vigrond Jan 05 '12 at 07:32
  • 1
    @Vigrond I tried that, it doesn't make the shadow blur drop off of the sides far enough. You need to add two corner shadows to make the sides more even. – Chris C Jan 05 '12 at 07:35
  • 2
    I don't think this is the right answer, this seems to stack three separate box-shadows on top of each other, making each edge much darker than expected. Isn't there a way to add a single shadow to each side, or one shadow that will cover all three? – jenlampton Apr 22 '15 at 01:29
5

If you are looking for something like Google material design shadows:

.shadow1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.shadow2 {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.shadow3 {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.shadow4 {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.shadow5 {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

Source: https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.wyvbmcq10

Maciej Krawczyk
  • 14,825
  • 5
  • 55
  • 67
4

Here's an example of the negative Y value suggested by @Vigrond

box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.15);
jenlampton
  • 315
  • 2
  • 7
2

I like @Chris C answer but I think, we do not need the first line of code. This is shorter and gives the same effect:

box-shadow: -10px 8px 15px lightgray, /*left and bottom*/
            10px 8px 15px lightgray; /*right and bottom*/


#note{
 position: absolute;
 top: 20px; left: 30px;
 width:100px; height: 100px;
 background-color: #eee;
 box-shadow: -10px 8px 15px lightgray,
 10px 8px 15px lightgray;
}
<div id="note"></div>
Nrc
  • 9,577
  • 17
  • 67
  • 114
0

If you have a solid background color, then you can accomplish this by using a combination of background-color and z-index. The trick is to give the element with box-shadow and its previous sibling positioning, then give the previous sibling a background color and set it to have a higher z-index so that it's stacked on top of the element with box-shadow, in effect covering its top shadow.

You can see a demo here: http://codepen.io/thdoan/pen/vNvpKv

If there's no immediate previous sibling to work with, then you can also use a pseudo-element such as :before or :after: http://codepen.io/thdoan/pen/ojJEMj

thdoan
  • 18,421
  • 1
  • 62
  • 57
  • It seems like a hack to stack the card on the other to cover up the shadow. Could cause breakage on other break points. – dman Sep 06 '18 at 16:12
0

For translucent shadows with hard corners (i.e. no blur radius) I used this:

.shadow-no-top {
  position: relative;
  box-shadow: -5px 0 0 0 rgba(0,0,0,.2), 5px 0 0 0 rgba(0,0,0,.2);
}
.shadow-no-top:before {
  content: "";
  position: absolute;
  top: 100%;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background-color: rgba(0,0,0,.2);
}

This uses a shadow for the left and right parts and adds the :after pseudo content as the bottom shadow. This avoids overlaps which make the shadow darker or missing corners.

However, this does require the background of the element to be solid.

spikyjt
  • 2,210
  • 21
  • 16