This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

text-shadow

Summary

The CSS text-shadow property applies one or more drop shadows to the text and <text-decorations> of an element. Each shadow is specified as an offset from the text, along with optional color and blur radius values.

Overview table

Initial value
none
Applies to
all elements
Inherited
Yes
Media
visual
Computed value
a color plus three absolute lengths
Animatable
Yes, as shadow list
CSS Object Model Property
textShadow
Percentages
N/A

Syntax

  • text-shadow: <blur-radius>
  • text-shadow: <color>
  • text-shadow: <offset-x>
  • text-shadow: <offset-y>
  • text-shadow: none

Values

none
Default value.
<offset-x>
Required. Specifies the horizontal <length> term to the right of the text. A negative horizontal <length> term will place the shadow to the left of the text.
<offset-y>
Required. Specifies the vertical <length> value below the text. A negative vertical <length> term will place the shadow above the text.
<blur-radius>
Optional. The blur radius is a <length> term that indicates the boundaries of the blur effect.
<color>
Optional. A color value may be applied before or after the <length> terms of both shadow effects. The color value will be inherited as the basis for the shadow. If a color is not specified by the user, the value of the color property will be used instead.

Examples

*/ This example uses all four values of the text-shadow property in the following order: <offset-x>, <offset-y>, <blur-radius>, and <color>. /*

p {
  text-shadow: 2px 2px 2px grey;
}

View live example

*/ This example uses both required offset values, <offset-x> and <offset-y>. The optional <blur-radius> and <color> values have been omitted. /*

p {
  text-shadow: -0.1em -0.1em;
}

View live example

*/ This example shows multiple shadow effects separated by a comma. Note the use of various units and color models applied to the values. /*

p {
  text-shadow: -0.1em -0.1em 1em purple, 3px 3px 0.1em rgba(0, 0, 0, 0.5);
}

View live example

Usage

 The text-shadow property can also be used to draw outlines, bevels, and other effects.

Notes

Multiple shadows are applied front-to-back, with the first-specified shadow on top.

The text-shadow property applies to both the ::first-line and ::first-letter pseudo-elements.

Related specifications

CSS Text Decoration Module Level 3
Working Draft

Attributions

  • Mozilla Developer Network cc-by-sa-small-wpd.svg: Article