[css] Box shadow for bottom side only

I have an box of content and need to give shadow for that. But I want to give shadow for the bottom of the box only. I used this css box-shadow: 0 3px 5px #000000;

If i give this code it shows left,right and bottom. I need bottom only

Can any one suggest to solve this one. Thanks a lot

This question is related to css

The answer is


-webkit-box-shadow: 0 3px 5px -3px #000;
-moz-box-shadow: 0 3px 5px -3px #000;
box-shadow: 0 3px 5px -3px #000;

You have to specify negative spread in the box shadow to remove side shadow

-webkit-box-shadow: 0 10px 10px -10px #000000;
   -moz-box-shadow: 0 10px 10px -10px #000000;
        box-shadow: 0 10px 10px -10px #000000;

Check out http://dabblet.com/gist/9532817 and try changing properties and know how it behaves


Try using online generator css3.me Change the value and get the code, pretty simple.


Specify negative value to spread value. This works for me:

box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.1);