B.115. text-shadow

This property lets you create drop-shadow effects behind text. A drop-shadow is a copy of the text rendered behind the actual text of the element, usually offset from the element's position and in a different color, and possibly blurred, which simulates light hitting the text and casting a shadow against the element's background. This property lets you create multiple drop-shadows for a single piece of text to simulate multiple light sources.

Inherited: No

B.115.1. Value

The syntax for this is as shown here:

text-shadow: color
					xOffset
					yOffset
					blurRadius, color
					xOffset
					yOffset
					blurRadius …

Each shadow is declared in a comma-separated sequence from bottom to top (i.e. the shadow declared last will be rendered over all the others). For each shadow, you can specify an optional color for the shadow. If none is specified, the color property of the element is used. Next, you must specify horizontal and vertical offsets for the shadow (xOffset and yOffset, respectively) as CSS lengths (px, pt, em, etc.). Positive offsets shift the shadow down and to the right, while negative offsets shift it up and to the left. Finally, you may specify a blur radius (blurRadius), again as a CSS length, if you want the shadow to display a blurred appearance.

This property can also be set to none for no shadows.

Initial value: none

B.115.2. Compatibility

CSS Version: 2

Not supported by any currently-available browser.

B.115.3. Example

This style rule sets any element of class phantom to show white text against a white background and to have a highly blurred, black shadow that reveals the shape of the text:

.phantom {
  color: #fff;
  background-color: #fff;
  text-shadow: black 0.5em 0.5em 0.5em;
}