CSStext-shadow Property
More "Try it Yourself" examples below.
Definition and Usage
Thetext-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 aboutanimatableTry it |
| Version: | CSS3 |
| JavaScript syntax: | object.style.textShadow="2px 5px 5px red"Try it |
Browser Support
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 |
CSS Syntax
text-shadow:h-shadow v-shadow blur-radius color|none|initial|inherit;
Note: To add more than one shadow to the text, add a comma-separated list of shadows.
Property Values
| Value | Description | Demo |
|---|---|---|
| h-shadow | Required. The position of the horizontal shadow. Negative values are allowed | Demo ❯ |
| v-shadow | Required. The position of the vertical shadow. Negative values are allowed | Demo ❯ |
| blur-radius | Optional. The blur radius. Default value is 0 | Demo ❯ |
| color | Optional. The color of the shadow. Look atCSS Color Values for a complete list of possible color values | Demo ❯ |
| none | Default value. No shadow | Demo ❯ |
| initial | Sets this property to its default value.Read aboutinitial | |
| inherit | Inherits this property from its parent element.Read aboutinherit |
More Examples
Example
Text-shadow on a white text:
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
Try it Yourself »color: white;
text-shadow: 2px 2px 4px #000000;
}
Example
Text-shadow with a red and blue neon glow:
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
Try it Yourself »text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
Related Pages
CSS tutorial:CSS Text Shadow
HTML DOM reference:textShadow property
