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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
/* 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.
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 are0
, 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 to0
.
Formal definition
Initial value | none
|
Applies to | all elements. It also applies to ::first-letter and ::first-line .
|
Inherited | yes |
Computed value | a color plus three absolute lengths |
Animation type | a shadow list |
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} [ / <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>
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 Text Decoration Module Level 3The 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.
|
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-shadow
|
Chrome
Full support 2 |
Edge
Full support 12 |
Firefox Full support 3.5 Full support 3.5 Notes' Firefox versions before 57 have a bug whereby |
IE
Full support 10 |
Opera Full support 9.5 Full support 9.5 Notes' Opera supports a maximum of 6-9 text-shadows for performance reasons. The blur radius is limited to 100px. Notes' Opera 9.5 to 10.1 adheres to the old, reverse painting order (in CSS2, the first specified shadow is on the bottom). |
Safari Full support 1.1 Full support 1.1 Notes' In Safari, any shadows that do not explicitly specify a color are transparent. Notes' 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. |
WebView Android
Full support 37 |
Chrome Android
Full support 18 |
Firefox Android Full support 4 Full support 4 Notes' Firefox versions before 57 have a bug whereby |
Opera Android
Full support 14 |
Safari iOS Full support 1 Full support 1 Notes' In Safari, any shadows that do not explicitly specify a color are transparent. Notes' Safari iOS 1 and 2 only support one text-shadow (displays the first shadow of a comma-separated list and ignores the rest). Safari iOS 3 (WebKit 528) and later support multiple text-shadows. |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
- See implementation notes.'
- See implementation notes.
Quantum CSS notes
- Gecko has a bug whereby
transition
s will not work when transitioning from atext-shadow
with a color specified to atext-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).
See also
box-shadow
- The
<color>
data type (for specifying the shadow color) - Applying color to HTML elements using CSS
text-shadow by Mozilla Contributors is licensed under CC-BY-SA 2.5.