CSS text-shadow property
- Previous page text-overflow
- Next page text-transform
Definition and usage
The text-shadow property sets the shadow on the text.
See also:
CSS3 Tutorial:CSS3 Text Effects
HTML DOM Reference Manual:textShadow attribute
Example
Basic text shadow effect:
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
More examples at the bottom of the page.
CSS syntax
text-shadow: h-shadow v-shadow blur color;
Note:The text-shadow property adds one or more shadows to the text. This property is a comma-separated list of shadows, each shadow has two or three length values and an optional color value for specification. Omitted lengths are 0.
Attribute value
| Value | Description | Test |
|---|---|---|
| h-shadow | Required. The horizontal position of the shadow. Negative values are allowed. | Test |
| v-shadow | Required. The vertical position of the shadow. Negative values are allowed. | Test |
| blur | Optional. The distance of the blur. | Test |
| color | Optional. The color of the shadow. See CSS Color Values. | Test |
Technical details
| Default value: | none |
|---|---|
| Inheritance: | yes |
| Version: | CSS3 |
| JavaScript syntax: | object.style.textShadow="2px 2px #ff0000" |
More examples
- Text shadow with a blur effect
- This example demonstrates text shadow with a blur effect.
- Text shadow on white text
- This example demonstrates text shadow on white text.
- Text shadow with neon effects
- This example demonstrates text shadow with neon effects.
Browser support
The numbers in the table indicate the first browser version that fully supports this attribute.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 4.0 | 10.0 | 3.5 | 4.0 | 9.6 |
- Previous page text-overflow
- Next page text-transform
