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 valuenone
  • Applies toAll elements
  • InheritedYes
  • MediaVisual
  • Computed valueA color plus three absolute lengths
  • AnimatableYes
  • CSS VersionCSS2, CSS3
  • JavaScript syntaxobject.style.textShadow
Formal syntax: none | <length>{2,3} && <color>

text-shadow: 1px 1px 1px #CCC;
  • 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.
.class {
   text-shadow: 1px 1px 1px #ccc; 
}
3.5+Firefox10+Explorer2+Chrome1.2+Safari9.5+Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.