CSS Text-Shadow Generator

How the text-shadow property works

Every CSS text-shadow follows the grammar offset-x offset-y blur color. Only the two offsets are required — leave blur off and it defaults to 0, giving a hard-edged copy of the letters shifted by the offsets. Positive offsets push the shadow right and down; negative ones push it left and up. This tool always writes all three lengths explicitly (for example 2px 2px 4px rgba(20, 23, 43, 0.5)) so the value is unambiguous when you paste it into a stylesheet.

text-shadow is not box-shadow

The two properties look alike but the grammar is different, and mixing them up is the most common bug here. text-shadow has no spread length and no inset keyword — those belong to box-shadow only. Add a fourth number to a text-shadow and the browser treats the whole declaration as invalid and simply drops it, so your shadow silently disappears. This generator is built around that rule: it never emits a spread value or the inset word, so every string you copy is a valid text-shadow. If you actually want to shadow a box rather than glyphs, use the Box-Shadow Generator instead.

Worked example: stacking for an outline

A single shadow can only sit on one side of the text. To wrap letters in a hard outline, stack four shadows in the four directions:

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

The browser paints the list front to back — the first line sits on top. Because each layer here uses 0 blur and a solid color, the four copies fuse into a crisp 1px stroke around every glyph. Add and remove layers with the buttons above and the tool comma-joins them in this same order automatically.

Worked example: a soft neon glow

For a glow, do the opposite — keep the offsets at zero and let increasing blur do the work in a bright hue:

text-shadow:
  0px 0px 8px rgba(91, 108, 255, 0.9),
  0px 0px 18px rgba(91, 108, 255, 0.6);

Two or three zero-offset layers at growing blur radii read as a halo of light around the letters. Glows shine on dark backgrounds — flip the preview background here to a near-black and dial the color to taste before you copy.

Why alpha and blur decide the look

A solid, fully opaque shadow almost always looks heavy on text, because glyphs are thin and a hard dark duplicate competes with the letters themselves. Most readable text shadows use a translucent color — black or a dark version of the surface at roughly 25% to 60% opacity — plus a small blur to soften the edge. That is why this tool writes shadow colors as rgba(r, g, b, a) and gives each layer its own opacity slider. If you need the raw color math, the Color Converter turns any HEX into rgba, and the WCAG Contrast Checker helps you keep shadowed text readable against its background.

Making a shadow work in light and dark themes

A translucent black shadow that lifts text off a white card can vanish entirely on a dark surface — there is too little tonal room below black for the eye to register it. Two honest fixes: raise the shadow's opacity and blur so a soft halo still shows, or invert it into a light-colored glow on dark. Because you can recolor both the preview background and the text here, you can tune one shadow against a light theme and a dark theme before committing it, rather than discovering the problem after you ship.

Honest limits

text-shadow follows the shape of the glyphs, which is exactly what you want for headings and short labels, but heavy multi-layer shadows on long paragraphs hurt readability and can cost paint performance on low-end devices — use it on display text, not body copy. Blur is capped at 0 or positive; a negative blur is invalid. Colors are standard 8-bit sRGB, and the preview font is the browser's default sans-serif at the weight shown, so your real font's stroke width and the exact family will subtly change how the same shadow reads — always confirm on the actual element. For a hard stroke, -webkit-text-stroke can be crisper than a four-way shadow, but it is a separate property with its own support notes.