Text Shadow

The text-shadow property applies shadow effects directly to text characters. Like box-shadow, it accepts comma-separated layers, but does not support inset or spread-radius.

Syntax

text-shadow: offset-x offset-y [blur-radius] [color]

Common Uses

Subtle legibility shadows on text over images
Glow effects for neon/cyberpunk aesthetics
Hard drop shadows for retro design
Outline effect using four directional shadows

Performance

Text shadow is GPU-accelerated in modern browsers, but complex multi-layer shadows on large amounts of animated text can still impact performance.

Example

/* Subtle legibility shadow on hero text */
.hero h1 {
    color: #fff;
    text-shadow: 0 2px 8px rgb(0 0 0 / 0.5);
}

/* Soft glow effect */
.neon {
    color: #0ff;
    text-shadow:
        0 0  4px #0ff,
        0 0 16px #0ff,
        0 0 32px #0af;
}

/* Hard retro drop shadow */
.retro {
    color: #fff;
    text-shadow: 3px 3px 0 #b71c1c;
}

/* Text outline using 4 shadows */
.outline-text {
    color: #fff;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}

/* Remove all text shadows */
.no-shadow {
    text-shadow: none;
}

CSS

Full Editor

Pro Tip

For text legibility over images, a very soft, zero-offset shadow (text-shadow: 0 1px 3px rgba(0,0,0,0.6)) is almost invisible to sighted users but dramatically improves readability for low-vision users and in bright ambient light.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned