user1117313 user1117313 - 5 months ago 12x
CSS Question

CSS box-shadow on three sides of a div?

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


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.