text-shadow

Published Jul 28, 2021Updated Sep 3, 2021
Contribute to Docs

Adds shadow to text.

Syntax

text-shadow: 2px 4px 10px blue;

The shadow is created with a combination of x and y offsets from the element, blur radius, and color:

  • value 1 (required): Offsets the x-axis.
  • Value 2 (required): Offsets the y-axis.
  • Value 3 (optional): Sets the blur radious.
  • Value 4 (optional): Sets the color of the shadow.

Note: We can add multiple text shadows by comma separating.

Example 1

Creating a basic text shadow.

h1 {
/* x-offset | y-offset */
text-shadow: 2px 4px;
}

Example 2

Creating a text shadow with blur effect and blue color.

h1 {
/* x-offset | y-offset | blur-radius | color */
text-shadow: 2px 4px 10px blue;
}

Example 3

Adding multiple text-shadows.

h1 {
/* x-offset | y-offset | blur-radius | color */
text-shadow: 2px 4px 10px #00e9ec, 3px 6px 5px green;
}

All contributors

Looking to contribute?

Learn CSS on Codecademy