CSS3 text-shadow Property
Topic: CSS3 Properties ReferencePrev|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 |
| 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
colorproperty 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.
Example
Try this code »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.
 |
Basic Support—
|
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.
