The text-shadow
CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations
. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.
/* offset-x | offset-y | blur-radius | color */ text-shadow: 1px 1px 2px black; /* color | offset-x | offset-y | blur-radius */ text-shadow: #fc0 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;
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.
<color>
<offset-x> <offset-y>
<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>
<length>
value. The higher the value, the bigger the blur; the shadow becomes wider and lighter. If not specified, it defaults to 0
.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} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
.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>
.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>
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. |
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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 2 | 12 | 3.5
|
10 | 9.5
|
1.1
|
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | Yes | ? | ? | ? | ? |
transition
s will not work when transitioning from a text-shadow
with a color specified to a text-shadow
without a color specified (bug 726550). This has been fixed in Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo, planned for release in Firefox 57).box-shadow
<color>
data type (for specifying the shadow color)
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow