CSS Text Shadow Generator

You want a subtle embossed text effect for a hero heading — that means two shadow layers: a dark shadow below-right and a light highlight above-left. Writing text-shadow: 1px 1px 2px rgba(0,0,0,0.3), -1px -1px 2px rgba(255,255,255,0.5) from memory requires getting offsets, blur, and colors right for each layer. Tweaking values means saving, refreshing, and repeating.

Why This Generator (Not DevTools)

Chrome DevTools lets you edit text-shadow live, but only on existing elements and one layer at a time with no visual sliders. This tool gives you visual sliders for offset, blur, color, and opacity, supports multiple shadow layers with real-time preview, and generates the complete CSS declaration. Everything runs in your browser.

CSS text-shadow Explained

The CSS text-shadow property adds one or more shadow effects to text elements. Unlike box-shadow, text shadows follow the shape of each glyph rather than the element’s bounding box. This makes them ideal for adding depth, emphasis, readability, and decorative effects directly to typographic elements.

The complete syntax for a single text shadow is:

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

Multiple shadows are separated by commas, rendering front-to-back (the first value appears on top).

Shadow Parameters

Horizontal Offset (X)

The X offset shifts the shadow left (negative values) or right (positive values) relative to each character. A value of 0 centers the shadow directly behind the text on the horizontal axis.

Vertical Offset (Y)

The Y offset shifts the shadow up (negative values) or down (positive values). A small positive Y offset mimics natural light from above, making text appear slightly raised.

Blur Radius

The blur radius controls how soft and diffuse the shadow edge is. A blur of 0 produces a sharp, hard-edged shadow that is an exact copy of the text shape. Larger values create a soft glow that fades outward.

/* Hard shadow — no blur */
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);

/* Soft glow */
text-shadow: 0px 0px 12px rgba(99, 102, 241, 0.8);

Color and Opacity

Shadow colors accept any valid CSS color. Using rgba() is recommended because it controls opacity independently of the color. For subtle depth shadows, values between rgba(0,0,0,0.2) and rgba(0,0,0,0.5) work well. For glow effects, fully opaque colors or high-opacity values are typical.

This tool converts your hex color and opacity percentage to rgba() automatically.

Multiple Shadow Layers

Stacking multiple text shadows is the key to achieving complex effects. Shadows are rendered front-to-back in declaration order.

/* 3D effect: stacked shadows create depth */
.text-3d {
  text-shadow:
    1px 1px 0px rgba(0, 0, 0, 0.8),
    2px 2px 0px rgba(0, 0, 0, 0.6),
    3px 3px 0px rgba(0, 0, 0, 0.4),
    4px 4px 0px rgba(0, 0, 0, 0.2);
}

Built-in Presets

Neon Glow

The neon effect uses multiple concentric glow layers at blur-radius: 0 offset, building up luminosity:

text-shadow:
  0 0 7px #fff,
  0 0 10px #00ffff,
  0 0 21px #00ffff,
  0 0 42px #00b3ff;

This technique works best on dark backgrounds with white or bright-colored text. The stacked blurs create an authentic neon tube appearance.

Emboss

The emboss preset creates a carved-into-surface effect by combining a white highlight shadow (top-left) with a dark shadow (bottom-right):

text-shadow:
  -2px -2px 3px rgba(255, 255, 255, 0.8),
  2px 2px 3px rgba(0, 0, 0, 0.4);

Works best with medium-toned backgrounds where the contrast between light and dark shadows is visible.

3D Effect

The 3D preset uses stacked solid shadows with no blur at 1px increments, creating a chunky extruded appearance:

text-shadow:
  1px 1px 0px rgba(0, 0, 0, 0.8),
  2px 2px 0px rgba(0, 0, 0, 0.6),
  3px 3px 0px rgba(0, 0, 0, 0.4),
  4px 4px 0px rgba(0, 0, 0, 0.2);

Increasing the number of layers and the per-layer offset deepens the 3D effect.

Retro

The retro preset uses two offset hard shadows in contrasting colors to create a vintage printed poster look:

text-shadow:
  3px 3px 0px #ff6b6b,
  6px 6px 0px #ffd93d;

Fire

The fire effect uses multiple upward-offset orange-to-red blur layers that simulate rising heat:

text-shadow:
  0 -1px 4px #fff200,
  0 -2px 8px #ff8c00,
  0 -4px 14px #ff0000,
  0 -6px 20px rgba(255, 0, 0, 0.8);

Negative Y offsets cause the shadows to extend upward (the “flames”), while increasing blur with distance creates the natural fade of fire.

Common Use Cases

Simple drop shadow:

text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

Text legibility over images:

text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);

White outline (stroke alternative):

text-shadow:
  -1px -1px 0 #ffffff,
  1px -1px 0 #ffffff,
  -1px 1px 0 #ffffff,
  1px 1px 0 #ffffff;

Blurred glow:

text-shadow: 0 0 16px rgba(99, 102, 241, 0.9);

Long shadow (flat design trend):

/* Generate with a loop in a preprocessor */
text-shadow:
  1px 1px 0px #555,
  2px 2px 0px #555,
  /* ... up to desired depth */;

Performance Considerations

text-shadow triggers paint operations and is rendered on the CPU in most browsers. It is generally more expensive than box-shadow per element because the shadow must follow the glyph outlines rather than a simple rectangle.

For animated text shadows, prefer transitions with minimal layers. For static decorative text, multiple layers are fine. Avoid text-shadow with blur-radius > 0 on large amounts of body text — it can noticeably slow down paint performance on low-end devices.

Browser Support

text-shadow has been supported across all major browsers since Internet Explorer 10 (2012). No vendor prefixes are required. It works on all text-containing elements including headings, paragraphs, spans, buttons, and pseudo-elements (::before, ::after).

Frequently Asked Questions

How is text-shadow different from box-shadow? text-shadow follows the shape of each character’s glyph, while box-shadow applies to the rectangular box of the element. text-shadow has no spread or inset parameters. It cannot be used for element-level effects.

Can I use text-shadow on any element? text-shadow works on any element that contains text. It affects all text within the element, including text in child elements. Use it on headings, paragraphs, buttons, labels, and links.

How do I create a text outline using text-shadow? Use four shadows offset in each direction at 0 blur: text-shadow: -1px -1px 0 #color, 1px -1px 0 #color, -1px 1px 0 #color, 1px 1px 0 #color;. For a thicker stroke, increase the offsets and add diagonal shadows.

Can text-shadow be animated? Yes. You can transition text-shadow values using CSS transitions or animations. The browser interpolates between shadow states. Keep the number of layers constant between keyframes for smooth interpolation.

Does text-shadow affect accessibility? Text shadows do not affect screen readers or text selection. However, high-contrast shadows can improve readability for users with visual impairments when text is displayed over complex backgrounds. Avoid shadows that reduce text contrast below WCAG AA minimums.

Does this tool send my data to a server? No. All shadow generation and CSS output happens entirely in your browser using JavaScript. No data is transmitted to any server.