The underlying text shadow effect:
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
There are more instances at the bottom of the page.
Browser support
| Ie | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
Text-shadow properties are supported in all major browsers.
Note: Internet Explorer 9 and earlier browsers do not support text-shadow properties.
Definitions and usages
The text-shadow property shades the text.
| Default: | none |
|---|---|
| Inheritance: | yes |
| Version: | CSS3 |
| JavaScript syntax: | object .style.textShadow="2px 2px #ff0000" |
Grammar
text-shadow: h-shadow v-shadow blur color;
Note: The text-shadow property adds one or more shadows to the text. T his property is a comma-separated list of shadows, each with two or three length values and an optional color value to specify. The omitted length is 0.
| Value | Describe | Test |
|---|---|---|
| h-shadow | Necessary. T he position of the horizontal shadow. Negative values are allowed. | Test |
| v-shadow | Necessary. T he position of the vertical shadow. Negative values are allowed. | Test |
| blur | Optional. Blurred distance. | Test |
| color | Optional. T he color of the shadow. See CSS Color Values. | Test |
Try it yourself - example
- A text shadow with a blur effect
- This example shows a text shadow with a blur effect.
- Shadows on white text
- This example shows a text shadow on white text.
- The text shadow of the neon effect
- This example shows a text shadow with a neon effect.
Related pages
CSS3 tutorial: CSS3 text effect