CSS3 text-shadowProperty
Example
Basic text shadow (text-shadow):
h1
{
text-shadow: 2px 2px #ff0000;
}
{
text-shadow: 2px 2px #ff0000;
}
Try it Yourself »
More examples at the bottom of this page.
Browser Support
The numbers in the table indicate the first browser version that supports this property.
| Property | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.6 |
Attribute definition and usage instructions
The text-shadow property applies shadows to text.
| Default value: | none |
|---|---|
| Inherited: | yes |
| version: | CSS3 |
| JavaScript Syntax: | object.style.textShadow="2px 2px #ff0000" |
Syntax
text-shadow: h-shadow v-shadow blur color;
Note:The text-shadow property attaches one or more shadows to text. The property is a comma-separated list of shadows, each specified by 2 or 3 length values and an optional color value. A length value of 0 is allowed.
| Value | Description |
|---|---|
| h-shadow | Required. The position of the horizontal shadow. Negative values are allowed. |
| v-shadow | Required. The position of the vertical shadow. Negative values are allowed. |
| blur | Optional. The blur radius. |
| color | Optional. The color of the shadow. See alsoCSS Color Values。 |
More Examples
Text Shadow Blur Effect
This example demonstrates a text shadow blur effect.
Text shadow on white text
This example demonstrates a white text shadow.
Neon glow text shadow
This example demonstrates a text shadow with a neon glow.