CSS text-shadow Property
Description
The text-shadow property applies one or more drop shadows, outlines, bevels, and other effects to the text of an element. Each text-shadow property must contain both a horizontal and vertical shadow value and, optionally, a blur radius and color value.
- Initial value
- none
- Applies to
- All elements
- Inherited
- Yes
- Media
- Visual
- Computed value
- A color plus three absolute lengths
- Animatable
- Yes
- CSS Version
- CSS2, CSS3
- JavaScript syntax
- object.style.textShadow
Syntax
Formal syntax: none | <length>{2,3} && <color>
text-shadow: 1px 1px 1px #CCC;
Values
- noneNo shadow is applied.
- <length>This is a <length> value. The first value represents offset-x and the second value represents offset-y, these values are required. The third value represents the blur radius, the higher the value, the bigger the blur; the shadow becomes wider and lighter. If not specified, it defaults to 0.
- <color>Optional. Can be specified either before or after the offset values. If the color is not specified, a browser chosen color will be used.
Example
.class {
text-shadow: 1px 1px 1px #ccc;
}Browser Support
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| 10 | 12 | 2 | 3.5 | 9.5 | 1.1 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| 37 | 18 | 4 | X | 1 | X |