text-shadow

Jump to: navigation, search

text-shadow


W3C Candidate Recommendation

Summary

The CSS text-shadow property applies one or more drop shadows, outlines, bevels, and other effects to the text of an element. Each text-shadow property must contain both a horizontal and vertical shadow value and, optionally, a blur radius and color value. A text-shadow can include multiple comma-delimited shadow effects. Multiple shadow effects are applied in a first-to-last order, whereas the first shadow effect will appear at the top, and the last shadow effect at the bottom.

Overview table

Initial value none
Applies to All elements and generated content
Inherited Yes
Media visual
Computed value as specified
Animatable Yes
CSS Object Model Property textShadow

Syntax

  • text-shadow: <offset-x>
  • text-shadow: <offset-y>
  • text-shadow: <blur-radius>
  • text-shadow: <color>
  • 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

View live example

CSS

*/ 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

CSS

*/ 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

CSS

*/ 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);
}

Notes

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


Related specifications

Specification Status Related Changes
CSS Text Decoration Module Level 3 Working Draft

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 2.0.158.0
3.5
10
9.5
1.1

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?

See also

Related articles

Text


















































  • text-shadow
… further results