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
text-shadow: none | <length>{2,3} && <color>
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
<div class="test">Rainbow text</div>
<div class="test2">Text with added shadow</div>
<div class="test3">Text with added shadow</div>
<div class="test4">Text with added shadow</div>
.test {
text-align: center;
line-height: 150px;
text-shadow: 0 0 4px white, 0 -5px 4px violet, 2px -10px 6px indigo, -2px -15px 11px blue, 2px -25px 18px green, -2px -40px 25px yellow, 2px -60px 33px orange, 0px -85px 40px red;
}
.test2 {
text-shadow: 6px 6px 2px rgba(255, 0, 0, 0.5);
}
.test3 {
text-shadow: -6px 6px 2px rgba(0, 255, 0, 0.5);
}
.test4 {
text-shadow: 0px 0px 6px rgba(0, 0, 255, 0.5);
}
.test, .test2, .test3, .test4 {
font-size: 1.5em;
}
Browser Support
Desktop | |||||
10 | 12 | 2 | 3.5 | 9.5 | 1.1 |
Tablets / Mobile | |||||
![]() |
|||||
37 | 18 | 4 | X | 1 | X |
Last updated by CSSPortal on: 3rd November 2019