CSS3 box-shadow property

Dana Woodman — Tue, 10 Nov 2009 00:28:48 +0000

This post outlines the new CSS3 box-shadow property and what you can do with it in your designs.

Description
Examples
Possible Values
Browser Support
Conclusions

Description

The box-shadow property allows drop shadows (as well as inner shadows) on block elements.

It is important to note that using box-shadow alone is not supported in any browser yet because CSS3 is not finalized is not even in the CSS3 specification anymore. Currently to get it working in WebKit browsers (Safari, Chrome) you need to use -webkit-box-shadow and for Mozilla browsers like Firefox you must use -moz-box-shadow.

Examples

Box with a normal drop shadow

box-shadow: 3px 3px 3px #666;
-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;

This box should have a 3px drop shadow.

Box with an equidistant drop shadow

box-shadow: 0 0 6px #666;
-moz-box-shadow: 0 0 6px #666;
-webkit-box-shadow: 0 0 6px #666;

This box should have a drop shadow on all sides.

Box with an inset shadow

box-shadow: inset 3px 3px 3px #666;
-moz-box-shadow: inset 3px 3px 3px #666;
-webkit-box-shadow: inset 3px 3px 3px #666;

This box should have a 3px inner shadow.

Box with a solid 2px drop shadow

box-shadow: 2px 2px 0 2px #666;
-moz-box-shadow: 2px 2px 0 2px #666;
-webkit-box-shadow: 2px 2px 0 2px #666;

This box should have a 2px offset drop shadow that is solid.

Box with a reverse 3px drop shadow

box-shadow: -3px -3px 3px #666;
-moz-box-shadow: -3px -3px 3px #666;
-webkit-box-shadow: -3px -3px 3px #666;

This box has a reverse 3px offset drop shadow.

Possible Values:

Name	Description
`inset`	If assigned, the outer shadow becomes a inner shadow.
horizontal offset	The distance to offset the shadow horizontally, can be positive or negative.
vertical offset	The distance to offset the shadow vertically, can be positive or negative.
blur radius	The distance to blur the shadow.
spread radius	The distance the radius is pushed away from the box.
shadow color	The color code to use for the shadow (e.g. “#fff”, or “white”, or “rgb(255,255,255), or even “rgba(255,255,255,.6)”).

Browser Support

Supported Browsers

Firefox (since version 3.5)
Safari (since version 3.1)
Chrome (since first version).

Unsupported Browsers

Internet Explorer
Opera (rumored to be supported in version 10)

Conclusion

I hope the above information was useful. If you want to see more examples of this property, want to see other tutorials, or have a question or comment please leave a message below.

Cheers!

Dana Woodman » CSS3