The text-shadow Property

The CSS text-shadow property allows you to add a shadow effect behind text. This is used to increase readability against complex backgrounds, add visual depth, or create unique decorative effects.

The property is highly versatile, accepting multiple shadow definitions separated by commas.

The text-shadow Syntax

A single shadow definition requires at least three values: the horizontal offset, the vertical offset, and the shadow color. A fourth, optional value defines the blur radius.

The Order of Values

styles.css

/* text-shadow: [horizontal-offset] [vertical-offset] [blur-radius (optional)] [color]; */

selector {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

Value	Required / Optional	Description
Horizontal Offset	Required	Positive value moves the shadow right. Negative moves it left.
Vertical Offset	Required	Positive value moves the shadow down. Negative moves it up.
Blur Radius	Optional	The size of the blur. A value of 0 means a sharp, solid shadow. Larger values mean a softer, more diffused shadow.
Color	Required	The color of the shadow (can use HEX, RGB, or any color format).

Example

styles.css

h1 {
  color: white; /* Text color */
  /* Shadow: 3px right, 3px down, 2px blur, black */
  text-shadow: 3px 3px 2px black; 
}

Practical Applications

1. Readability Enhancement (Subtle Shadow)

A tiny, subtle shadow can greatly improve text readability, especially over images or busy patterns. Notice the low offset and high blur.

styles.css

/* Soft, diffused shadow for contrast over images */
.banner-text {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
}

2. Creating an Outline Effect (Sharp Shadow)

By setting the blur radius to 0 and using offsets around the text, you can simulate an outline (though the standard text-stroke or text-decoration may be better for true outlines).

styles.css

/* Text outline effect (no blur) */
.outlined-text {
  color: white;
  text-shadow: 
    -1px -1px 0 #333, /* Top-Left */
    1px -1px 0 #333,  /* Top-Right */
    -1px 1px 0 #333,  /* Bottom-Left */
    1px 1px 0 #333;   /* Bottom-Right */
}

3. Multiple Shadows (3D/Layered Effect)

You can define multiple shadows by separating each set of values with a comma. The shadows are layered from front to back, meaning the first shadow listed is the one closest to the text.

styles.css

/* Creates a layered, vintage 3D look */
.retro-text {
  text-shadow: 
    2px 2px 0px #ff00ff,   /* Front shadow (Magenta) */
    4px 4px 0px #00ffff,   /* Middle shadow (Cyan) */
    6px 6px 0px #0000ff;   /* Back shadow (Blue) */
}

Interactive text-shadow Demo

Use the live editor to adjust the offset and blur values. Try adding a second or third shadow separated by commas to create a layered look.

Challenge: Add a second shadow to the existing rule: text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7), 8px 8px 1px darkred;. Notice how the dark red shadow appears farther back.