Text shadows: the 'text-shadow' property

'text-shadow'

Value:	none | [ || ? ,]* [ || ?] | inherit
Initial:	none
Applies to:	all elements
Inherited:	no (see prose)
Percentages:	N/A
Media:	visual

This property accepts a comma-separated list of shadow effects to be applied to the text of the element. The shadow effects are applied in the order specified and may thus overlay each other, but they will never overlay the text itself. Shadow effects do not alter the size of a box, but may extend beyond its boundaries. The stack level of the shadow effects is the same as for the element itself.

Each shadow effect must specify a shadow offset and may optionally specify a blur radius and a shadow color.

A shadow offset is specified with two "> values that indicate the distance from the text. The first length value specifies the horizontal distance to the right of the text. A negative horizontal length value places the shadow to the left of the text. The second length value specifies the vertical distance below the text. A negative vertical length value places the shadow above the text.

A blur radius may optionally be specified after the shadow offset. The blur radius is a length value that indicates the boundaries of the blur effect. The exact algorithm for computing the blur effect is not specified.

A color value may optionally be specified before or after the length values of the shadow effect. The color value will be used as the basis for the shadow effect. If no color is specified, the value of the 'color' property will be used instead.

Text shadows may be used with the :first-letter and :first-line pseudo-elements.

Example(s):

The example below will set a text shadow to the right and below the element's text. Since no color has been specified, the shadow will have the same color as the element itself, and since no blur radius is specified, the text shadow will not be blurred:

H1 { text-shadow: 0.2em 0.2em }

The next example will place a shadow to the right and below the element's text. The shadow will have a 5px blur radius and will be red.

H2 { text-shadow: 3px 3px 5px red }

The next example specifies a list of shadow effects. The first shadow will be to the right and below the element's text and will be red with no blurring. The second shadow will overlay the first shadow effect, and it will be yellow, blurred, and placed to the left and below the text. The third shadow effect will be placed to the right and above the text. Since no shadow color is specified for the third shadow effect, the value of the element's 'color' property will be used:

H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

Example(s):

Consider this example:

SPAN.glow {
   background: white;
   color: white;
   text-shadow: black 0px 0px 5px;
}

Here, the 'background' and 'color' properties have the same value and the 'text-shadow' property is used to create a "solar eclipse" effect:

[D]

Note. This property is not defined in CSS1. Some shadow effects (such as the one in the last example) may render text invisible in UAs that only support CSS1.