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
Explorer Edge Chrome Firefox Opera Safari
101223.59.51.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
37184X1X

Last updated by CSSPortal on: 3rd November 2019