CSS text-shadow

Adds shadow to text.

Syntax

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

Copy to clipboard
Copy to clipboard

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 radius.
• 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;
}

Copy to clipboard
Copy to clipboard

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;
}

Copy to clipboard
Copy to clipboard

Example 3

Adding multiple text-shadows.

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

Copy to clipboard
Copy to clipboard