text-shadow

Summary

The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and text-decorations of the element.

Each shadow is specified as an offset from the text, along with optional color and blur radius values.

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

This property applies to both ::first-line and ::first-letter pseudo-elements.

  • Initial value none
  • Applies to all elements
  • Inherited yes
  • Media visual
  • Computed value a color plus three absolute lengths
  • Animatable yes, as a shadow list
  • Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

Formal grammar: none | [<shadow>,]* <shadow>

                where <shadow> is: [ <color>? <offset-x> <offset-y> <blur-radius>? | <offset-x> <offset-y> <blur-radius>? <color>? ]

Values

<color>
Optional. Can be specified either before or after the offset values. If the color is not specified, a UA-chosen color will be used.
Note: If you want to ensure consistency across browsers, explicitly specify a color.
<offset-x> <offset-y>
Required. These <length> values specify the shadow's offset from the text. <offset-x> specifies the horizontal distance; a negative value places the shadow to the left of the text. <offset-y> specifies the vertical distance; a negative value places the shadow above the text. If both values are 0, then the shadow is placed behind the text (and may generate a blur effect when <blur-radius> is set).
To find out what units you can use, see <length>.
<blur-radius>
Optional. This is a <length> value. If not specified, it defaults to 0. The higher this value, the bigger the blur; the shadow becomes wider and lighter.

Examples

text-shadow: orange 0 -2px;

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
color: white;
font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
             rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
             rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px; 
color: gold;
background: gold;

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Specifications

Specification Status Comment
CSS Transitions Working Draft Lists text-shadow as animatable.
CSS Text-decoration Level 3 Candidate Recommendation  

The CSS property text-shadow was improperly defined in CSS2 and dropped in CSS2 (Level 1). The CSS Text Module Level 3 spec improved and precised the syntax. Later it was moved to new working draft CSS Text Decoration Module Level 3.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2.0.158.0 3.5 (1.9.1) 10 9.5 1.1 (100)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?
  • Gecko (Firefox) theoretically supports infinite text-shadows (don't try it).
    Gecko 2 and later cap the blur radius at 300 for performance reasons.
    If the <color> value is unspecified, then Gecko uses the value of the element's color property.
  • Opera supports a maximum of 6-9 text-shadows for performance reasons. The blur radius is limited to 100px.
    Opera 9.5-10.1 adheres to the old, reverse painting order (CSS2, the first specified shadow is on the bottom).
  • Internet Explorer 5.5 supports Microsoft's Shadow and DropShadow Filter.
  • Safari: Any shadows that do not explicitly specify a color are transparent.
    Safari 1.1-3.2 only supports one text-shadow (displays the first shadow of a comma-separated list and ignores the rest).
    Safari 4.0 (WebKit 528) and later support multiple text-shadows.
  • Konqueror supports text-shadow starting with version 3.4.

See also

Hide Sidebar