CSS Text Shadow Generator — Visual Builder

Text-Shadow Syntax: No Spread Parameter

The text-shadow CSS property takes exactly three length values and a color: text-shadow: x y blur color; — and nothing else. Unlike box-shadow, which accepts x y blur spread color (four lengths), text-shadow has no spread parameter. Developers often copy a box-shadow value expecting it to work, only to find the declaration rejected or the extra value ignored. The exact syntax is: horizontal offset (can be negative), vertical offset (can be negative), blur radius (always non-negative), and color.

Stacking Four Shadows to Build a Text Outline

Since text-shadow lacks a spread parameter, you cannot create a true outline with one declaration. Instead, stack four identical shadows at 1px offset in opposite directions: up, down, left, and right. Example:

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

This repeats the same shadow comma-separated four times, creating a 1-pixel border all around the text. If you need a thicker outline, use 2px offsets instead. This approach works, but -webkit-text-stroke is the purpose-built alternative and behaves differently — the stroke is centred on the glyph outline rather than sitting outside it, so it visually thins the letterform as it thickens the edge.

When Text Shadows Matter: Legibility on Images

The legitimate use for text-shadow is making captions readable over unpredictable background images. A soft dark shadow under white or light text improves perceived readability instantly. Be aware: a shadow does not count toward WCAG contrast ratios, which measure only the text color and background color. So your text may look readable thanks to the shadow while the measured contrast still fails accessibility standards. If the underlying contrast is poor, a shadow is a visual band-aid, not a compliance fix.

What This Tool Exposes and What It Doesn't

This generator lets you control the four fundamental parameters—horizontal offset, vertical offset, blur radius, and shadow color—with live preview showing your text at custom size over a gradient background. It does not expose multiple comma-separated shadows, meaning you cannot build and preview a full outline inside the tool (you would need to write the four-shadow declaration by hand). Heavy blurred shadows on large amounts of text also cost repainting time; use sparingly on large blocks and test performance on mobile devices. For more complex multi-layered effects, see the box-shadow generator.