Cascading Style Sheets: The Definitive Guide, Second Edition

Text Shadows

CSS2 includes a property for adding drop shadows to text, but this property did not make it into CSS2.1 because no browser had implemented full support for it by the time CSS2.1 was finished. When you consider the effort necessary to make a web browser determine the outlines of text in an element and then compute one or more shadows, all of which would have to blend together without overlapping the text itself, the lack of drop shadows in the specification is perhaps understandable.

text-shadow

Values

none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit

Initial value

none

Applies to

all elements

Inherited

no

The obvious default is not to have a drop shadow for text. Otherwise, it’s theoretically possible to define one or more shadows. Each shadow is defined by a color and three length values. The color sets the shadow’s color, of course; so it’s possible to define green, purple, or even white shadows.

The first two length values determine the offset distance of the shadow from the text, and the optional third length value defines the “blur radius” for the shadow. To define a green shadow offset five pixels to the right and half an em down from the text, with no blurring, you would write:

text-shadow: green 5px 0.5em;

Negative lengths cause the shadow to be offset to the left and upward from the original text.

The blur radius is defined as the distance from the shadow’s outline to the edge of the blurring effect. A radius ...