Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: DIVs and containers: CSS3 demos: Here

CSS3 Box Shadows (“box-shadow” property)

Update (Aug 21st, 09'): Added info on creating shadows in IE using filters.

CSS3 supports a new "box-shadow" property that makes light work of adding shadows to elements on your page, such as images, DIVs and SPANs. The feature is supported in FF3.5, Safari 3.1+, and Google Chrome, albeit all via vendor specific versions of this property. And IE has long supported simple drop shadows via its pripoertary "Drop Shadow" filter. Together, they enable you to easily add lightweight shadows that work in those supported browsers while degrading nicely in browsers that don't.

The syntax for "box-shadow" is:

box-shadow: <horizontal> <vertical> <blur> <color>

Whereby:

  • Horizontal: A length specifying the horizontal offset of the shadow. A positive value (ie: 5px) will render the shadow to the right of the box, while a negative value (ie: -10px) will render it to the left instead.
  • Vertical: A length specifying the vertical offset of the shadow. A positive value (ie: 5px) will render the shadow following the bottom of the box, while a negative value (ie: -10px) will render it to the left instead.
  • Blur: A length setting the spread/ blur radius. The default value is 0, which means no blur. A positive value increases the blur, while a negative value actually shrinks the shadow. This property defaults to 0 if it's not specified.
  •  color: A color value setting the color of the shadow.

As mentioned, while FF3.5 and WebKit browsers support the "box-shadow" property, they currently implement it via their own vendor specific equivalent property. So to apply a CSS3 box shadow to a container, you should define all 3 properties at the same time, each following the exact same syntax rules as the original property above.

The following adds a shadow to a DIV that's offset right and to the bottom, with no blur:


<style type="text/css">
.shadow1{
box-shadow: 5px 5px #818181;
-webkit-box-shadow: 5px 5px #818181;
-moz-box-shadow: 5px 5px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
}
</style>

<div class="shadow1" style="width:500px; height:50px; padding:5px; background:navy; border: 1px solid black;"> </div>

Notice the last line, which is IE's own method of adding a shadow using filters. For more info on its syntax, see:  "Drop Shadow" filter.

Here's a very similar shadow, except with a blur radius of 8px added:


<style type="text/css">
.shadow2{
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}
</style>

<div class="shadow2" style="width:500px; height:50px; padding:5px; background:navy; border: 1px solid black;"> </div>

The blur effect is NOT visible in IE, as IE's "Drop Shadow" filters doesn't support it. And here's a shadow added to an image, inversed and using a brownish color:

<style type="text/css">
.shadow3{
box-shadow: -6px -6px 10px #561A0B;
-webkit-box-shadow: -6px -6px 10px #561A0B;
-moz-box-shadow: -6px -6px 10px #561A0B;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#561A0B, offX=-6, offY=-6, positive=true);
}
</style>

<img src="brandstorming.gif" class="shadow3" />

The days of messy and complicated CSS hacks to create shadows are coming to an end thank God!

Code Info

Rate this code:

Date Posted: 08/18/2009

Revision History: None

Usage Terms: Click here

Your Comments
Copyright 2006-2016 Dynamic Drive