Text Shadow

CSS Text Shadow

The CSS text-shadow property adds one or more shadows to text. You can control the shadow's horizontal and vertical position, blur amount, and color to create effects ranging from subtle depth to decorative text.

The text-shadow Property

The CSS text-shadow property creates a shadow behind text. A basic shadow uses horizontal and vertical offsets followed by a color.

h2 {
  text-shadow: 2px 2px #999999;
}

The first value moves the shadow horizontally and the second moves it vertically.

Horizontal Offset

The first length value controls the horizontal position of the shadow. A positive value moves the shadow to the right, while a negative value moves it to the left.

.right {
  text-shadow: 3px 0 #999999;
}

.left {
  text-shadow: -3px 0 #999999;
}

A value of 0 places the shadow at the same horizontal position as the text.

Vertical Offset

The second length value controls the vertical position of the shadow. A positive value moves the shadow downward, while a negative value moves it upward.

.down {
  text-shadow: 0 3px #999999;
}

.up {
  text-shadow: 0 -3px #999999;
}

A value of 0 places the shadow at the same vertical position as the text.

Blur Radius

An optional third length value specifies the shadow's blur radius. A value of 0 creates a sharp shadow, while larger values create a softer, more blurred effect.

h2 {
  text-shadow: 2px 2px 4px #999999;
}

The blur radius is optional, but the horizontal and vertical offsets are required when defining a text shadow.

Shadow Color

A color can be specified for the shadow using any appropriate CSS color format, including named colors, hexadecimal values, RGB, HSL, and colors with transparency.

h2 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

Using a color with transparency can create a softer shadow that blends with the background.

Multiple Text Shadows

The text-shadow property can apply more than one shadow to the same text. Separate each shadow with a comma.

h2 {
  text-shadow:
    2px 2px 3px #999999,
    -2px -2px 3px #dddddd;
}

Multiple shadows are drawn in the order they are listed, with the first shadow appearing on top of the shadows that follow it.

Removing a Text Shadow

The none value removes text shadows from an element. It is also the initial value of the text-shadow property.

h2 {
  text-shadow: none;
}

This can be useful when an element would otherwise inherit or receive a text shadow from another CSS rule.

Try Different Text Shadows

Edit the text-shadow values in the example to experiment with the shadow position, blur radius, color, and multiple shadows.

Text Shadows and Readability

Text shadows can add depth or visual emphasis, but strong shadows can make text harder to read. Large offsets, heavy blur, or several overlapping shadows can reduce the contrast between the characters and their background.

For normal text, subtle shadows are usually easier to read. More decorative effects are generally better suited to short headings or other limited amounts of text.

Summary

The CSS text-shadow property adds shadow effects to text. The first two values control the horizontal and vertical offsets, an optional third value controls the blur radius, and a color controls the appearance of the shadow. Multiple shadows can be applied by separating them with commas, while none removes the effect.

This completes the CSS Typography section of the HTML Tutorials.