text-shadow

The text-shadow property adds a shadow to the text and sets its parameters: shadow color, offset relative to the caption and blur radius.

Initial Value none
Applies to All elements, including ::first-letter and ::first-line
Inheritance yes
Animation Shadow-specific values

The text-shadow property adds a shadow to text. In addition to a simple drop shadow, decorative effects and multiple shadows can be applied.

A single shadow is represented by a combination of x- and y- coordinate offsets, blurring range, and color. Specifying multiple of them in a comma-separated list format is also possible. Multiple shadows are applied along the z-axis from front to back (with the first shadow given on top).

Syntax

/* offset-x | offset-y | blur-radius | color */

text-shadow: 3px 3px 1px blue;

/* color | offset-x | offset-y | blur-radius */

text-shadow: #333 2px 0 5px;

/* offset-x | offset-y | color */

text-shadow: 4px 4px #f3f3f3;

/* color | offset-x | offset-y */

text-shadow: gray 1px 4px;

/* offset-x | offset-y

Use defaults for color and blur-radius */

text-shadow: 3px 7px;

/* Global values */

text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;

Description

valuewhat it does
noneDefault value. The shadow is not displayed.
x-shiftRequired value. Shadow offset horizontally. A positive value shifts the shadow to the right, and a negative value to the left.
y-shiftRequired value. Shadow offset vertically. A positive value sets the shadow to shift down, and a negative value – up.
blurOptional value. Sets the blur radius of the shadow. The larger the value, the more the shadow is smoothed, becoming broader and lighter. If this parameter is not set, the default setting is 0, and the shadow will be clear, not blurry.
colorOptional value. Sets the color of the shadow. By default, the shadow is black.
inheritThe value is inherited from the parent element.
initialSets the default value.

Example

A simple down -> left type of shadow with a slight blur:

Lorem ipsum dolor sit amet.
#demo-shadow {
	text-shadow: 4px 6px 5px #000;
}

And this one without a blur but also a different shadow color:

Lorem ipsum dolor sit amet.
#demo-shadow2 {
	text-shadow: 11px 11px blue;
}

It’s also possible to add a uniform shadow without adding an X or Y offset:

Lorem ipsum dolor sit amet.
#demo-shadow3 {
	text-shadow: 0px 0px 5px #333;
}