CSS3 text-shadow Property
More "Try it Yourself" examples below.
Definition and Usage
The text-shadow property adds shadow to text.
This property accepts a comma-separated list of shadows to be applied to the text.
| Default value: | none |
|---|---|
| Inherited: | yes |
| Animatable: | yes. Read about animatable Try it |
| Version: | CSS3 |
| JavaScript syntax: | object.style.textShadow="2px 5px 5px red" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | ||||||
|---|---|---|---|---|---|---|
| text-shadow | 4.0 | 12.0 | 10.0 | 3.5 | 4.0 | 9.6 |
CSS Syntax
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
Note: To add more than one shadow to the text, add a comma-separated list of shadows.
Property Values
| Value | Description | Play it |
|---|---|---|
| h-shadow | Required. The position of the horizontal shadow. Negative values are allowed | Play it » |
| v-shadow | Required. The position of the vertical shadow. Negative values are allowed | Play it » |
| blur-radius | Optional. The blur radius. Default value is 0 | Play it » |
| color | Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values | Play it » |
| none | Default value. No shadow | Play it » |
| initial | Sets this property to its default value. Read about initial | Play it » |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
This example demonstrates a text-shadow with a blur effect:
h1 {
text-shadow: 2px 2px 8px #FF0000;
}
Try it yourself »
Example
This example demonstrates text-shadow on a white text:
h1 {
color: white;
text-shadow:
2px 2px 4px #000000;
}
Try it yourself »
Example
This example demonstrates text-shadow with a red neon glow:
h1 {
text-shadow: 0 0 3px #FF0000;
}
Try it yourself »
Example
This example demonstrates text-shadow with a red and blue neon glow:
h1 {
text-shadow: 0 0 3px #FF0000,
0 0 5px #0000FF;
}
Try it yourself »
Related Pages
CSS3 tutorial: CSS3 Text Effects
HTML DOM reference: textShadow property
