CSS2 and CSS3 text-shadow

The property specifies one or more text shadow effects to be added to the text content of an element. text-shadow was originally specified in CSS2 but removed from CSS2.1 due to the lack of implementation among browsers. It’s currently also included in the CSS3 Text module.

Shadow effects are applied in the order in which they are specified. They don’t increase the size of a box, though they can extend past its boundaries, and their stack order is the same as the element itself.

text-shadow is inherited in CSS3.

.title {
  text-shadow: 2px 2px 2px #666;
}

This rule, applied to the first heading on the page, specifies a text shadow effect that extends 2px to the right of and below the text, with shadow color of #666, and has a 2px blur .

Multiple shadows

Multiple shadows are hot!

This css property has 3 shadow values and colors separated by comas, shifting each color slightly further above and more blur.

text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;

Browser Compatibility

Firefox 3+, Safari 3+, Opera 9.5+, Chrome, IE9?

Tutorials and Tools

http://www.quirksmode.org/css/textshadow.html

http://www.w3.org/Style/Examples/007/text-shadow

http://www.css3.info/preview/text-shadow/