Box-shadow, one of CSS3′s best new features

The diagram below (taken from the W3C Backgrounds and Borders Candidate Recommendation) offers a good example of the effects of spread and blur on the shadow:

An optional color value can also be supplied, directly after the 2-4 length values, to define the shadow’s color. If not supplied, a UA-chosen default should be applied, however, whilst in Firefox/Opera/IE9 the default color is black, in Safari/Chrome (webkit) no shadow is visible unless a color is specified.

Here are a few examples of shadows with differing offsets, spread and blur.

Examples:

A

B

C

D

E

F

Example A shows a shadow offset to the left and top by 5px:

#Example_A {
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}

Example B shows the same shadow with a blur distance of 5px:

#Example_B {
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

Example C shows the same shadow with a spread distance of 5px:

#Example_C {
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}

Example D shows the same shadow with both a blur distance of 5px and a spread distance of 5px:

#Example_D {
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}

Example E shows a shadow with no offset and a blur distance of 5px:

#Example_E {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

Example F shows a shadow with no offset and both a blur distance of 5px and a spread distance of 5px:

#Example_F {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}

Browser Support

The box-shadow property has not caught on as quickly as some of its peers (such as the border-radius property) and the property was removed from the CSS3 Backgrounds and Borders specification when it reached Candidate Recommendation earlier this year, pending further development, however the property has been reintroduced in the latest version of the specification and browser support has been growing steadily of late.

The table below provides an overview of current browser support.

Browser	Basic support		Multiple shadows	inset keyword	Spread radius
Internet Explorer	9.0	box-shadow	9.0	9.0	9.0
Firefox (Gecko)	4.0 (2.0)	box-shadow	4.0 (2.0)	4.0 (2.0)	4.0 (2.0)
	3.5 (1.9.1)	-moz-box-shadow	3.5 (1.9.1)	3.5 (1.9.1)	3.5 (1.9.1)
Opera	10.5	box-shadow	10.5	10.5	10.5
Safari/Chrome (WebKit)	3.0/1.0 (522)	-webkit-box-shadow	4.0/1.0 (528)	5.0/4.0 (533)	5.0/4.0 (533)
Browser support data courtesy of Mozilla Developer Center.

from http://www.css3.info/preview/box-shadow/

http://css-tricks.com/snippets/css/css-box-shadow/