How to Use the CSS Text Shadow Generator

Use the Offset X and Offset Y sliders to position the shadow relative to the text — positive X moves it right, positive Y moves it down. The Blur slider controls how soft the shadow edge is; a value of 0 produces a hard, crisp shadow while higher values create diffuse glow or depth effects. Use the Color picker to choose the shadow color and the Opacity slider to control its transparency.

For instant inspiration, click the preset buttons: Glow applies a soft purple halo, Neon creates a bright cyan glow, Long Shadow adds a retro diagonal hard shadow, and Retro gives a classic pink offset look. You can fine-tune any preset after applying it.

text-shadow Syntax Explained

The text-shadow property accepts a comma-separated list of shadow definitions, each with the format: offset-x offset-y blur-radius color. The blur radius is optional and defaults to 0 if omitted. Unlike box-shadow, text-shadow does not support the inset keyword or a spread radius — it is intentionally simpler.

All four values can use any CSS length unit. Negative offset values move the shadow left (X) or up (Y). The color value accepts any CSS color format including named colors, hex, rgb(), rgba(), hsl(), and hsla(). Using rgba() or hsla() allows fractional opacity without the separate Opacity slider approach.

Glow Effect Recipe

A glow effect is created with zero offsets and a moderately large blur radius. Stacking multiple text-shadow definitions with the same color but different blur sizes creates a more convincing glow with a bright inner core and a diffuse outer halo:

.glow-text {
  text-shadow:
    0 0 10px rgba(108, 99, 255, 0.8),
    0 0 30px rgba(108, 99, 255, 0.5),
    0 0 60px rgba(108, 99, 255, 0.2);
}

Neon Effect Recipe

Neon signs have a bright core with colored light bleeding outward. Combine a white or very bright inner shadow with a colored outer glow:

.neon-text {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 15px #00d4aa,
    0 0 40px #00d4aa,
    0 0 80px rgba(0, 212, 170, 0.4);
}

Stacking Text Shadows

Multiple text shadows are listed in the CSS value separated by commas. They are applied front-to-back — the first shadow in the list is rendered on top. This allows layering effects such as adding both a color glow and a subtle depth shadow simultaneously. There is no browser-imposed limit on the number of stacked shadows, though excessive stacking can impact rendering performance, particularly on mobile devices.

Performance Notes

text-shadow is rendered on the CPU by most browser engines rather than the GPU, which means animating text shadows on every frame can cause jank. For animated glow or pulse effects, consider animating the opacity or transform of a pseudo-element overlay instead, or use CSS filter: drop-shadow() which may be GPU-accelerated depending on the browser.

Practical Examples

Subtle Depth Shadow

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

Embossed (Light) Text

.embossed {
  color: #555;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.8), -1px -1px 1px rgba(0,0,0,0.2);
}

Long Retro Shadow

.retro {
  color: #fff;
  text-shadow:
    2px 2px 0 #ff6b9d,
    4px 4px 0 rgba(255,107,157,0.5);
}