text-shadow

The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and text-decorations of the element.

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black; 
/* color | offset-x | offset-y | blur-radius */
text-shadow: #CCC 1px 0 10px; 
/* offset-x | offset-y | color */
text-shadow: 5px 5px #558ABB;
/* color | offset-x | offset-y */
text-shadow: white 2px 5px;
/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;
/* Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;

Initial value	`none`
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Inherited	yes
Media	visual
Computed value	a color plus three absolute lengths
Animation type	a shadow list
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

This property is specified as a comma-separated list of shadows.

Each shadow is specified as two or three <length> values, followed optionally by a <color> value. The first two <length> values are the <offset-x> and <offset-y> values. The third, optional, <length> value is the <blur-radius>. The<color> value is the shadow's color.

When more than one shadow is given, shadows are applied front-to-back, with the first-specified shadow on top.

This property applies to both ::first-line and ::first-letter pseudo-elements.

Values

<color>: Optional. The color of the shadow. It can be specified either before or after the offset values. If unspecified, the color's value is left up to the user agent, so when consistency across browsers is desired you should define it explicitly.
<offset-x> <offset-y>: Required. These <length> values specify the shadow's distance from the text. <offset-x> specifies the horizontal distance; a negative value places the shadow to the left of the text. <offset-y> specifies the vertical distance; a negative value places the shadow above the text. If both values are 0, the shadow is placed directly behind the text, although it may be partly visible due to the effect of <blur-radius>.
<blur-radius>: Optional. This is a <length> value. The higher the value, the bigger the blur; the shadow becomes wider and lighter. If not specified, it defaults to 0.

Formal syntax

none | <shadow-t>#where 
<shadow-t> = [ <length>{2,3} && <color>? ]
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Examples

Simple shadow

.red-text-shadow {
  text-shadow: red 0 -2px;
}

<p class="red-text-shadow">Sed ut perspiciatis unde omnis iste
    natus error sit voluptatem accusantium doloremque laudantium,
    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>

Multiple shadows

.white-text-with-blue-shadow {
  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
  color: white;
  font: 1.5em Georgia, serif;
}

<p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste
    natus error sit voluptatem accusantium doloremque laudantium,
    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>

Specifications

Specification	Status	Comment
CSS Transitions The definition of 'text-shadow' in that specification.	Working Draft	Specifies `text-shadow` as animatable.
CSS Text Decoration Module Level 3 The definition of 'text-shadow' in that specification.	Candidate Recommendation	The CSS property `text-shadow` was improperly defined in CSS2 and dropped in CSS2 (Level 1). The CSS Text Module Level 3 spec refined the syntax. Later it was moved to CSS Text Decoration Module Level 3.

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	2.0	(Yes)	3.5 (1.9.1)^[1]	10^[3]	9.5^[2]	1.1 (100)^[4]

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	?	?	?	?

[1] Gecko theoretically supports infinite text-shadows (don't try it). Gecko 2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) and later cap the blur radius at 300 for performance reasons. If the <color> value is unspecified, then Gecko uses the value of the element's color property.

[2] Opera supports a maximum of 6-9 text-shadows for performance reasons. The blur radius is limited to 100px. Opera 9.5 to 10.1 adheres to the old, reverse painting order (in CSS2, the first specified shadow is on the bottom).

[3] Internet Explorer 5.5 supports Microsoft's Shadow and DropShadow Filter.

[4] In Safari, any shadows that do not explicitly specify a color are transparent. Safari 1.1 to 3.2 only supports one text-shadow (displays the first shadow of a comma-separated list and ignores the rest). Safari 4.0 (WebKit 528) and later support multiple text-shadows. Konqueror supports text-shadow starting with version 3.4.