CSS Text Shadow Generator

Using the CSS Text Shadow Generator

The text-shadow values

text-shadow takes a horizontal offset, a vertical offset, a blur radius and a colour. Unlike box-shadow there is no spread or inset. You can stack several shadows separated by commas; the first one is drawn on top.

Glow effects

A glow is a shadow with no offset and a large blur in a bright colour. Stacking two or three glows of increasing blur builds a convincing neon sign. The glow layer in this generator adds one such shadow on top of the drop shadow.

Readability first

A subtle shadow can lift light text off a busy photo, but heavy blur makes letters fuzzy and harder to read. For body text, keep shadows small or avoid them; save dramatic effects for big headlines.

Shadows as outlines

Four tight shadows offset by one pixel in each direction make a fake text outline, an old trick for readable captions over images. The native -webkit-text-stroke property is another option for headings.

Readable text over images

For captions over photos, a soft dark shadow with a small offset and moderate blur, such as 0 1px 3px at 60% opacity, lifts light text without looking heavy. For guaranteed contrast, combine it with a semi-transparent dark gradient behind the text, because a shadow alone cannot rescue text on a very bright image.

Frequently asked questions