CSS Reference
CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX CSS3 Browser SupportCSS Properties
CSS3 text-shadow Property
Example
Basic 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 text-shadow property is supported in all major browsers.
Note: The text-shadow property is not supported in Internet Explorer 9 and earlier versions.
Definition and Usage
The text-shadow property applies shadow 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. Omitted lengths are 0.
| 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 | Optional. The blur distance | Play it » |
| color | Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values | Play it » |
Try it Yourself - Examples
Text-shadow with a blur effect
This example demonstrates a text-shadow with a blur effect.
Text-shadow on white text
This example demonstrates text-shadow on a white text.
Text-shadow with neon glow
This example demonstrates text-shadow with a neon glow.
Related Pages
CSS3 tutorial: CSS3 Text Effects
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
