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	14	1	1.0

Last updated by CSSPortal on: 3rd November 2019