text-shadow

< css‎ | properties
Jump to: navigation, search

text-shadow

This article is Ready to Use.

W3C Candidate Recommendation

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

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

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

Specification Status Related Changes
CSS Text Decoration Module Level 3 Working Draft Lists text-shadow as animatable.

Attribution

This article contains content originally from external sources.

Portions of this content come from the Mozilla Developer Network cc-by-sa-small-wpd.svg: Article