🔤 CSS Text Shadow Generator

Adjust the horizontal/vertical offset, blur radius and color to build a text-shadow CSS snippet.

Offset X (px)

Offset Y (px)

Blur (px)

Color

Three lengths and a colour - no more

The four controls concatenate into the full value that CSS accepts for text:

text-shadow: <offset-x>px <offset-y>px <blur>px <color>;

text-shadow: 2px 2px 4px #000000;   /* the default */

That is the whole syntax. Unlike box-shadow, text-shadow has no spread value and no inset keyword - you cannot grow the shadow or put it inside the glyphs. The blur is a Gaussian radius, so a 4px blur spreads roughly 2px either side of the offset copy. Inputs are read as whole numbers, so typing 2.7 in an offset gives 2; only a negative blur is rejected outright.

Making text readable, and the outline trick

For text over a photo, a large blur at zero offset works better than a hard drop: 0 0 8px rgba(0,0,0,0.8) darkens the halo all round rather than only below-right.
Stack four shadows for a fake outline: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000. The property takes a comma-separated list, painted first to last with the first on top.
The colour picker emits opaque hex. Swap it by hand for an rgba() value if you want the shadow to sit lightly under the text.

A shadow does not fix a contrast failure. WCAG measures the ratio between the text colour and the background colour behind it; the shadow is not part of that calculation. If your text is 3:1 on its background, adding a shadow leaves it at 3:1 and still short of the 4.5:1 that normal text needs.

Frequently asked questions

How do I add a text outline in CSS?

Either four zero-blur text-shadows offset by 1px diagonally, or -webkit-text-stroke: 1px black, which is now widely supported and gives a cleaner edge on large type.

Can text-shadow have a spread like box-shadow?

No. text-shadow takes at most two offsets, one blur and a colour. To thicken a shadow you have to layer several comma-separated copies at slightly different offsets.

How do I make text readable over a background image?

A soft dark halo - 0 0 8px black at high opacity - or better, a semi-opaque panel behind the text. The panel is the accessible option, because it gives you a real background colour to measure contrast against.