CSS box shadow

You can create shadow for any block element, like divs.


box-shadow: horizontal-offset vertical-offset blur spread color inset;


The horizontal offset, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
The vertical offset, positive one means the shadow will be below the box, negative one means the box-shadow will be above the box.
The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
The spread radius (optional), this it the size of the shadow.  Default value is 0, so the shadow is same size as blur.
Color is HEX color value, like #000 or #FFFFFF.
Inset (optional) changes the shadow from outer shadow to inner shadow.

To make sure CSS box shadow works fine in all browser use -moz- and -webkit- too.

CSS for outer shadow

.box-shadow {
 -moz-box-shadow: 5px 5px 5px 5px #DDD;
 -webkit-box-shadow: 5px 5px 5px 5px #DDD;
 box-shadow: 5px 5px 5px 5px #DDD;

CSS for inner shadow

.inner-shadow {
 -moz-box-shadow: 0 0 5px #000 inset;
 -webkit-box-shadow: 0 0 5px #000 inset;
 box-shadow: 0 0 5px #000 inset;

CSS for one side-only shadow

.side-only-shadow {
 -webkit-box-shadow: 0 10px 5px -5px #000;
 -moz-box-shadow: 0 10px 5px -5px #000;
 box-shadow: 0 10px 5px -5px #000;


Related articles

Vecteezy - Free Vector Art

Vecteezy - Free Vector Art


If you need Free Vector Art do not hesitate: visit

Free vector icons

Free vector icons


Want to have some vector icons, free? Try this nice website.

Beautiful free stock photos from StockSnap

Beautiful free stock photos from StockSnap


Would you like some cool stock photos for free? Check out this article, and try this website.

Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the flower *

Find us on Facebook



Back to Top