CSS text-shadow generator — glows, drop shadows and 3D lettering

How to use the CSS text shadow generator

1. In Shadow layers, write one shadow per line: x offset, y offset, an optional blur, then a colour. For example 2px 2px 0 #1e3a8a.
2. Change Preview text, Font size, Text colour and Background so the preview looks like your real heading.
3. If a line cannot be read, the tool tells you which one.
4. Copy the .headline rule and rename the class to suit your page.

What it does and when to use it

text-shadow draws copies of the letter shapes behind the text, shifted and blurred. One soft shadow lifts a heading off a photo. Several sharp shadows, each one pixel further out, build the stepped “3D” letters seen on posters. Shadows with zero offset and growing blur make a neon glow.

Use it for headings, logos and short labels, not body text, where shadows blur letter edges. If you want a clean outline instead of a shadow, the text stroke generator is a better fit, and for shadows on boxes rather than letters use the box shadow generator.

How it works

Each line is parsed into lengths and one colour. Bare numbers get px, colours in any CSS form are written back as hex, or as rgba() when they are see-through. The layers are joined with commas into one declaration, together with your text colour:

.headline {
  color: #3b82f6;
  text-shadow: 2px 2px 0 #1e3a8a, 4px 4px 14px rgba(0, 0, 0, 0.35);
}

That is the default output. MDN lists text-shadow as Baseline widely available since July 2015, so no prefixes are needed.

Worked examples

Neon glow. Two layers, 0 0 8px #ff00ff and 0 0 16px #ff00ff, with white text on a dark background, give text-shadow: 0 0 8px #ff00ff, 0 0 16px #ff00ff; The small blur sharpens the glow near the letters and the larger one spreads it out.

Stepped 3D letters. Four hard layers, each moved one more pixel down and right, the last one darker, with amber text #fbbf24: text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309, 3px 3px 0 #b45309, 4px 4px 0 #92400e;

A box-shadow habit. Typing inset 0 2px 4px #000 returns the message "inset" is not allowed in text-shadow, because text shadows cannot be inset.

Limits and tips

• Many blurred layers cost paint time. Each blurred layer is redrawn whenever the text moves, so keep animated headings to one or two layers.
• Glows reduce contrast at the edges. Pick text and background colours that pass on their own, and test them with the contrast checker.
• The preview is fixed at weight 800, so check the result with your real font.
• For gradient text or motion, pair the shadow with the CSS gradient generator or the animation generator.