text-shadow

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

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.

Compatibility

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
2.0.158.0
Yes
?
Unknown
10
Yes
9.5
Yes
1.1
Yes

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
?
Unknown
?
Unknown
?
Unknown
?
Unknown
?
Unknown


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

Usage

The text-shadow propertie 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.

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 ? ? ? ? ? ? ? ?


Compatibility notes

Browser Version Note
Firefox 4.0 and later cap the blur radius at 300 for performance reasons
Firefox N/A if the <color> value is undefined, Firefox use the elements <color> value
Opera N/A max. 6-9 text-shadows for performance reason
Opera N/A blur radius is limited to 100px

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