text-shadow (CSS property)

Description

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.

Value

Each shadow value must specify a shadow offset and, optionally, a blur radius and color.

The offset is specified using two length values; the first value represents the horizontal distance to the right of the text (if it’s positive), or to the left of the text (if the value’s negative); the second value represents the vertical distance below the text (if it’s positive) or above the text (if it’s negative).

The blur radius is specified after the offset values; it’s a length value that represents the size of the blur effect. If no radius is specified, the shadow will not be blurred.

The color can be specified before or after the offset and blur radius values. According to CSS2, if no color value is specified, the shadow will use the value of the color property instead. However, in CSS3 the specification states that the user agent determines the shadow color in the absence of a specified value.

Compatibility

Safari up to and including version 4 and Chrome versions up to and including 3 don’t support multiple shadows.