More "Try it Yourself" examples below.
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 |
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.6 |
Note: To add more than one shadow to the text, add a comma-separated list of shadows.
| 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 |
This example demonstrates a text-shadow with a blur effect:
This example demonstrates text-shadow on a white text:
This example demonstrates text-shadow with a red neon glow:
This example demonstrates text-shadow with a red and blue neon glow:
CSS3 tutorial: CSS3 Text Effects
HTML DOM reference: textShadow property
Your message has been sent to W3Schools.