CSS text-shadow

View Output

The CSS text-shadow property is used for applying shadow effects to text.

You can use text-shadow to apply drop-shadows, outer glows, and other shadow effects to text.

The text-shadow property accepts a list of values. Each item in the list can have either two, three, or four values.

The first two values are length values that define the shadow's horizontal offset and vertical offset respectively (these are required values). A third length value can be used define the shadow's blur radius (optional). And a color value can be used to define the shadow's color (optional).

You can apply multiple shadow effects within a single text-shadow declaration by separating each set of values with a comma. Multiple shadow effects are applied in the order specified and may thus overlay each other, but they will never overlay the text itself.

Text shadows are not clipped to the shadowed shape and may show through if the text is partially-transparent. Also, text shadows do not influence layout, and do not trigger scrolling or increase the size of the scrollable area.

Syntax

These values are explained below.

Possible Values

none
No shadow.
1st length
The first length value specifies the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.
2nd length
The second length value specifies the vertical offset of the shadow. A positive value offsets the shadow down, a negative one up.
3rd length
The third length value specifies the blur radius. Larger values result in a more blurred shadow. A value of 0 results in a sharp shadow. Negative values are not allowed.
color
This value specifies the color of the shadow. If this value is not specified, the shadow has the resulting color of the ink that it shadows.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value
none
Applies To
All elements
Inherited?
Yes
Media
Visual
Animatable
Yes (see example)

Example Code

Official Specifications

The text-shadow property was introduced in CSS2, dropped from CSS2.1, then subsequently reintroduced in CSS3 (under the CSS Text Decoration Module Level 3).