CSS Text Shadow Generator

CSSTools.io

CSSTools

CSS Text Shadow: Complete Guide

The CSS text-shadow property adds one or more shadow effects to text characters. Unlike box-shadow which wraps around an element's rectangular box, text-shadow traces the exact outline of each glyph — making it ideal for glow effects, embossed text, neon signs, 3D typography and retro lettering styles.

Use the generator above to create single or multi-layer text shadows visually, then copy the CSS directly into your project.

text-shadow Syntax

The full syntax is: text-shadow: offset-x offset-y blur-radius color; — and you can stack multiple shadows by separating them with commas.

/* Single shadow */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

/* Multiple layered shadows */
text-shadow:
  0 0 10px #7c6fff,
  0 0 20px #7c6fff,
  0 0 40px rgba(124, 111, 255, 0.5);

/* 3D letterpress effect */
text-shadow:
  1px 1px 0 rgba(255,255,255,0.3),
  -1px -1px 0 rgba(0,0,0,0.5);

text-shadow vs drop-shadow

text-shadow applies directly to text characters and is the most widely supported option. filter: drop-shadow() is a newer CSS filter function that produces a similar result but works on any element including images and SVGs — and correctly handles transparent areas. The key differences:

/* text-shadow — text only, no spread value */
text-shadow: 3px 3px 6px rgba(0,0,0,0.4);

/* drop-shadow filter — works on any element */
filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.4));

Use text-shadow for pure text effects. Use filter: drop-shadow() when you need shadows on images, SVGs, or elements with transparency where the shadow should follow the actual shape rather than the bounding box.

Popular Text Shadow Effects

Neon glow — Stack 3–4 shadows with the same color but increasing blur radii. Use a bright color like cyan or magenta for the classic neon look.

.neon {
  color: #fff;
  text-shadow:
    0 0 5px #ff6fb0,
    0 0 15px #ff6fb0,
    0 0 30px #ff6fb0,
    0 0 60px rgba(255,111,176,0.4);
}

Long shadow — Create many layers with incrementing x and y offsets to simulate a flat-design shadow stretching diagonally from each letter.

.long-shadow {
  text-shadow:
    1px 1px 0 rgba(0,0,0,0.15),
    2px 2px 0 rgba(0,0,0,0.14),
    3px 3px 0 rgba(0,0,0,0.13),
    4px 4px 0 rgba(0,0,0,0.12),
    5px 5px 0 rgba(0,0,0,0.11);
}

Emboss / letterpress — Combine a light shadow above with a dark shadow below the text to create a pressed-into-the-surface effect.

.emboss {
  color: rgba(255,255,255,0.7);
  text-shadow:
    -1px -1px 1px rgba(255,255,255,0.4),
     1px  1px 1px rgba(0,0,0,0.6);
}

Hard outline — Place four shadows at ±1px offsets to create a solid outline around each character.

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

How to Use This Text Shadow Generator

Pick a preset or build from scratch — Click any preset (Neon Glow, Retro 3D, Embossed, Outlined, Soft Drop, Glitch, and more) to load it, then tweak.
Adjust each layer — Drag the offset, blur, color and opacity sliders. Add multiple layers for richer effects like neon, 3D and depth.
Copy the CSS — Switch between CSS and Tailwind tabs and copy the code into your project.

Performance Tips

Text shadows with large blur values or many stacked layers can impact rendering performance, especially on mobile. Keep blur under 20px for smooth scrolling pages. If you need intense glow effects on large amounts of text, consider using CSS filters with drop-shadow() instead, or apply the effect only to headings rather than body text. Avoid animating text-shadow on mobile — animate opacity instead and pre-render the shadow state.

Browser Support

text-shadow is supported in all modern browsers and has been since 2011 — completely safe to use without fallbacks.

Feature	Chrome	Firefox	Safari	Edge
text-shadow (single)	4+	3.5+	3.1+	10+
text-shadow (multi-layer)	4+	3.5+	4+	10+
text-shadow animation	26+	16+	7+	12+

Frequently Asked Questions

How do I create a glowing text effect in CSS?

Stack two or three text-shadow layers with the same color and zero offset, increasing the blur on each: text-shadow: 0 0 8px #0ff, 0 0 18px #0ff, 0 0 32px #0ff. The Neon Glow preset above produces this — pick it, change the color, copy the CSS.

How do I layer multiple text shadows?

Separate each shadow with a comma. Each shadow takes offset-x offset-y blur-radius color. Layers render bottom-up — the first shadow listed appears on top. Click "+ Add Shadow Layer" in the generator to build them visually instead of writing the syntax by hand.

text-shadow vs drop-shadow filter — which should I use for text?

For most cases, use text-shadow: it's purpose-built, performs better, and supports stacking. Use filter: drop-shadow() only if you need a shadow on the actual glyph outline including any borders or backgrounds. See our text-shadow vs drop-shadow comparison for side-by-side examples.

Why is my text shadow blurry on retina screens?

Sub-pixel offsets get rounded inconsistently on high-DPI displays. Use whole-pixel offsets (2px not 1.5px) and avoid fractional blur radii. If text still looks fuzzy, the cause is usually transform: scale() on a parent — shadows are rasterized before scaling, then resampled.

Can I animate text-shadow?

Yes — text-shadow is animatable. Common pattern: transition: text-shadow 0.3s ease with a different shadow on hover. For pulsing glow, use a keyframe animation that cycles the blur radius. Avoid animating on long body text on mobile due to repaint cost.

Want to see text-shadow compared side-by-side with drop-shadow with real examples? Read our text-shadow vs drop-shadow guide →

Tool last updated: May 2026