# 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 2`px` 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/