CSS Text Shadow Generator

Shadows and glows on text are a quick way to lift headings off busy backgrounds. This generator shows your own text live while you set offsets, blur, colour and opacity, with separate controls for the text and background colours so you can judge readability. When it looks right, copy the CSS.

How to use it

Type some preview text.
Move the sliders for offset and blur.
Choose the shadow, text and background colours.
Copy the text-shadow line.

When it helps

Making headings readable over photos.
Creating a glow or retro effect.
Lifting text off a patterned background.
Trying styles quickly.

Good to know

A small shadow with a little blur adds depth without hurting legibility.
For a glow, set both offsets to zero, raise the blur and pick a bright colour.
Check contrast after adding a shadow; heavy ones can make letters harder to read.

Anatomy of a text shadow

Text shadows have horizontal and vertical offsets, a blur radius and a colour, with no spread value. A small offset with no blur gives a hard edge, like a printed offset, while a zero offset with blur creates a glow.

You can list several shadows separated by commas to build layered effects, such as outlines.

Worked example: readable text on a photo

White text over a bright photo is hard to read. Add a shadow of 0 2px 6px with a dark colour at 50 percent, and the letters gain a soft edge that separates them from the background. Check at different sizes.

For a neon look, use a bright colour with zero offsets and stack several shadows with increasing blur.

Readability tips

Keep shadows subtle on body text, because strong shadows reduce legibility. Check contrast between text and background, since a shadow doesn't count towards accessibility contrast ratios.

Use effects on headings and large display text, not on paragraphs.

Text effects to try

For an outline, stack four shadows offset one pixel in each direction in the outline colour. For an embossed look, use a light shadow below and a dark one above. For a long shadow, stack many shadows increasing the offset by one pixel each.

Keep effects tasteful and test them at the sizes you'll use.

Performance and print

Text shadows with large blur on lots of text can slow older devices. Use them on headings, not paragraphs. In print stylesheets, remove shadows, as they use ink and reduce clarity.

A media query for prefers-reduced-motion won't affect static shadows, but removing animated glows for those users is considerate.

Copy and test

Paste the generated line into your CSS and view it in the browser. Look at it on both light and dark themes, because a shadow that works on one can look wrong on the other.