Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

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:

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 (6)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 1 pages

Awesome! This rocks! Now we just have to give IE the boot. :-p
Posted by X96 on 08/19, 12:03 AM
I am salivating over the fact that IE is slowly being eradicated! I tear gently glides down my cheek as I say a final prayer for our once beloved IE. ;)
Posted by jay skagnetti on 08/19, 01:57 PM
IE does support box shadows via "filter". I remember that two years ago I used this css command to add shadow to images in a gallery.
Posted by Tween on 08/20, 03:28 PM
Ah yes, I can't believe I forgot about IE and filters. Article updated.
Posted by ddadmin on 08/21, 05:56 PM
The box-shadow also has an inset property that will draw the shadow on the inside like the box is sunken. This is great for replacing the image in the background of text boxes.
Posted by Jeff Tackett on 08/28, 10:10 AM
I am a designer but I never used this one. Now I will go for it.
Posted by Joomla Programmer on 08/30, 11:29 PM

Comment Pages 1 of 1 pages


Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.