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