CSS box-shadow on three sides of a div? [duplicate]

Answer 1

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

Answer 2

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

box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.15); 

Answer 3

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.

Answer 4

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

#shadowBox {
    background-color: #ffffd;
    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.

Answer 5

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>

Answer 6

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