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

HTML

<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>

CSS

.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;
}

Result