CSS Text Shadow Generator

How to use the css text shadow generator

1. Adjust the controls and watch the preview update.
2. Read the generated CSS below the controls.
3. Copy it into your stylesheet.

About this tool

text-shadow works like box-shadow but without spread: two offsets, a blur radius and a colour. Its most useful job is not decoration but legibility — a dark, blurred shadow behind light text keeps it readable over a photograph whose brightness you cannot control.

For that purpose keep the offsets at zero and use blur alone, which produces a halo rather than a directional drop shadow. A hard shadow with no blur, offset by one or two pixels, gives the opposite effect: a retro, printed look.

Unlike box-shadow, text-shadow is inherited, so setting it on a container applies it to all the text inside.

Common uses

• Keeping caption text readable over an image.
• Adding a subtle lift to a heading.
• Reproducing a retro hard-edged type effect.

Frequently asked questions

Why does my text look blurry rather than shadowed?

The shadow colour is probably too close to the text colour. A shadow should contrast with the text, not match it.

Can I layer several text shadows?

Yes, comma-separated. Four hard shadows at 1px in each direction is a common way to fake an outline.

Is text-shadow inherited?

Yes, unlike box-shadow. Setting it on a parent applies it to descendant text unless overridden.