What is text-shadow?

The text-shadow property adds shadow effects to text, creating depth, emphasis, or decorative styling. Unlike box-shadow which affects the entire element, text-shadow follows the exact shape of each letter.

CSS

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

Text Shadow Syntax

CSS

/* text-shadow: offset-x offset-y blur-radius color */
text-shadow: 2px 2px 4px black;

The Four Values

offset-x: Horizontal displacement (positive = right, negative = left)
offset-y: Vertical displacement (positive = down, negative = up)
blur-radius: How blurry the shadow is (optional, defaults to 0)
color: Shadow color (optional, defaults to text color)

CSS

/* Sharp shadow (no blur) */
text-shadow: 2px 2px black;

/* Soft shadow */
text-shadow: 2px 2px 6px black;

/* Colored shadow */
text-shadow: 2px 2px 6px rgba(52, 152, 219, 0.8);

/* Shadow above and left */
text-shadow: -2px -2px 4px gray;

Common Text Shadow Effects

Subtle Depth

CSS

.subtle-shadow {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

Perfect for adding slight dimension without being distracting.

Soft Glow

CSS

.glow {
  color: white;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.blue-glow {
  color: #3498db;
  text-shadow: 0 0 20px rgba(52, 152, 219, 0.6);
}

.neon-glow {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #3498db,
    0 0 30px #3498db,
    0 0 40px #3498db;
}

Hard Shadow (Retro/3D Effect)

CSS

.hard-shadow {
  color: #2c3e50;
  text-shadow: 3px 3px 0 #3498db;
}

.layered-shadow {
  color: white;
  text-shadow:
    1px 1px 0 #2c3e50,
    2px 2px 0 #2c3e50,
    3px 3px 0 #2c3e50,
    4px 4px 0 #2c3e50;
}

Text Outline Effect

Since CSS doesn't have a native text outline property, we can simulate it with multiple shadows:

CSS

.text-outline {
  color: white;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

/* Smoother outline with more shadows */
.smooth-outline {
  color: white;
  text-shadow:
    -1px -1px 0 #000,
    0 -1px 0 #000,
    1px -1px 0 #000,
    1px 0 0 #000,
    1px 1px 0 #000,
    0 1px 0 #000,
    -1px 1px 0 #000,
    -1px 0 0 #000;
}

Embossed Text

CSS

/* Raised/embossed */
.embossed {
  color: #ccc;
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.5),
    1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Engraved/inset */
.engraved {
  color: #666;
  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.5),
    -1px -1px 2px rgba(0, 0, 0, 0.3);
}

Long Shadow

CSS

.long-shadow {
  color: #3498db;
  text-shadow:
    1px 1px 0 darken(#3498db, 5%),
    2px 2px 0 darken(#3498db, 10%),
    3px 3px 0 darken(#3498db, 15%),
    4px 4px 0 darken(#3498db, 20%),
    5px 5px 0 darken(#3498db, 25%),
    6px 6px 0 darken(#3498db, 30%);
}

/* Using transparency for long shadow */
.long-shadow-fade {
  text-shadow:
    1px 1px rgba(0,0,0,0.2),
    2px 2px rgba(0,0,0,0.18),
    3px 3px rgba(0,0,0,0.16),
    4px 4px rgba(0,0,0,0.14),
    5px 5px rgba(0,0,0,0.12),
    6px 6px rgba(0,0,0,0.1);
}

Multiple Shadows

Combine multiple shadows separated by commas:

CSS

.multi-shadow {
  text-shadow:
    2px 2px 0 #e74c3c,
    4px 4px 0 #f39c12,
    6px 6px 0 #27ae60;
}

The first shadow is on top, subsequent shadows layer behind.

Practical Use Cases

Readable Text Over Images

CSS

.hero-text {
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Stronger version for busy backgrounds */
.hero-text-strong {
  color: white;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.6),
    0 2px 8px rgba(0, 0, 0, 0.4);
}

Logo Styling

CSS

.logo {
  font-family: 'Impact', sans-serif;
  font-size: 4rem;
  color: #2c3e50;
  text-shadow:
    4px 4px 0 #3498db,
    -1px -1px 0 #fff;
}

Highlighted/Selected Text Effect

CSS

.highlight {
  background: linear-gradient(120deg, #f39c12 0%, #f39c12 100%);
  background-repeat: no-repeat;
  background-size: 100% 40%;
  background-position: 0 90%;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

Button Text Depth

CSS

.button {
  background: #3498db;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.button:active {
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
}

Animation with Text Shadow

CSS

.pulsing-glow {
  color: #fff;
  animation: pulse-shadow 2s infinite;
}

@keyframes pulse-shadow {
  0%, 100% {
    text-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
  }
  50% {
    text-shadow: 0 0 30px rgba(52, 152, 219, 0.9);
  }
}

Performance Considerations

Text shadows are relatively performant but can slow down rendering with:

- Very large blur values

- Many layered shadows

- Animated shadows

For performance-critical animations, consider using opacity changes or transforms instead
On mobile, be conservative with complex shadow effects

text-shadow vs box-shadow

CSS

/* text-shadow: follows letter shapes */
.text {
  text-shadow: 2px 2px 4px black;
}

/* box-shadow: rectangular shadow around entire element */
.text {
  box-shadow: 2px 2px 4px black;
}

Use text-shadow when you want the shadow to follow the contours of your text. Use box-shadow (covered in the CSS Box Shadow article) for element-level shadows.

Browser Support

text-shadow has excellent browser support across all modern browsers. No prefixes needed.

Key Takeaways

offset-x, offset-y control shadow position; blur controls softness
Use rgba colors for subtle, transparent shadows
Combine multiple shadows for complex effects
Create outlines by placing shadows in all directions
Use text-shadow on dark backgrounds to make light text readable
Keep shadows subtle for body text, more dramatic for headings
Consider performance with large blur values or many layers

This connects to the Box Shadow article for element-level shadows, and the Typography article for the broader context of styling text.