text-shadow
Quick Summary for 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 any of its decorations. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.
Code Usage for text-shadow
/* 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: revert; text-shadow: unset; 
More Details for text-shadow

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 any of its decorations. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.

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: revert; 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 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 definition

Initial valuenone
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Computed valuea color plus three absolute lengths
Animation typea shadow list

Formal syntax

none | <shadow-t>#

where <shadow-t> = [ <length>{2,3} && <color>? ]

where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <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>? )<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )

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
CSS Text Decoration Module Level 3 # text-shadow-property

Quantum CSS notes

Gecko has a bug whereby transitions 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).

See also

box-shadow The <color> data type (for specifying the shadow color) Applying color to HTML elements using CSS

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Don't look to be the next Facebook, try to solve a real problem instead.
Unknown
Random CSS Property

@font-face

The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.
@font-face css reference