CSS PROPERTIES
Expand All|Collapse All
CSS AT-RULES
SPONSORED LINKS

CSS3 text-shadow Property

Topic: CSS3 Properties Reference« Prev|Next »

Description

The text-shadow CSS property applies one or more text shadow effects to the text content of an element. Each text shadow effect must specify a shadow offset and may optionally specify a blur radius and a shadow color.

The following table summarizes the usages context and the version history of this property.

Default value: none
Applies to:
All elements. It also applies to ::first-letter and ::first-line.
Inherited: Yes
Animatable: Yes. See animatable properties.
Version: New in CSS3

Usage Notes

  • The text shadow effects are applied in the order specified and may thus overlay each other, but they will never overlay the text itself.
  • A blur radius may optionally be specified after the shadow offset value; it's a length value represents the size of the blur effect.
  • A color value for the shadow may optionally be specified before or after the offset length values. If no color is specified for the shadow, the value of the CSS color property will be used instead.

Syntax

The syntax of the property is given with:

text-shadow shadow1 [, shadow2, ... shadowN] | none | inherit
where shadow is: [offset-x offset-y blur-radius color]

The example below shows the text-shadow property in action.

  • h1 {
  •     text-shadow: 2px 2px 5px #000;
  • }
  • p {
  •     text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  • }
 

Note:If both the shadow offset values are set to 0, then the shadow is placed behind the text and may generate a blur effect when blur-radius is specified.


Property Values

The following table describes the values of this property.

Value Description
Required — The following values must be specified for the property.
h-shadow Specifies the horizontal distance to the right of the text. A negative horizontal length value places the shadow to the left of the text.
v-shadow Specifies the vertical distance below the text. A negative vertical length value places the shadow above the text.
Optional — The following values are optional.
blur Specify the blur size.
color Specify the color of the shadow. Look at CSS Color Values for the list of possible color values.
inherit If specified, the associated element takes the computed value of its parent element text-shadow property.

Browser Compatibility

The text-shadow property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 3.5+
  • Google Chrome 2+
  • Internet Explorer 10+
  • Apple Safari 1.1+
  • Opera 9.5+
 

Warning:Internet Explorer 7 and earlier versions don't support the value inherit. IE8 supports inherit, but requires a <!DOCTYPE>. IE9 supports inherit.


Further Reading

See tutorial on: CSS Text.

Text-related properties: letter-spacing, text-align, text-decoration, text-indent, text-overflow, text-transform, white-space, word-spacing.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.