What text-shadow can do
Three offsets plus a colour, applied per glyph: offset-x offset-y blur colour. Used with restraint it lifts white text off a busy photo; used carelessly it turns headlines into 2009 forum posts. The live sample uses a bold 44px headline so you can judge legibility, not just effect.
Recipes that hold up
- Photo overlay: 0 2px 8px rgba(0,0,0,.45) — a soft grounding shadow
- Neon: 0 0 6px currentColor, 0 0 18px currentColor with a matching colour
- Embossed: 0 1px 0 #fff, 0 −1px 0 rgba(0,0,0,.4) on a mid-tone surface
- Long shadow: stack 10–20 one-pixel offsets — decorative only, never for body text
Contrast first
Text shadow does not count toward WCAG contrast; the text colour and background still must pass 4.5:1. If you need a shadow to make text readable over an image, add a scrim instead — a semi-transparent overlay behind the text is more reliable and cheaper to render.
Performance notes
Text shadows are painted per glyph, so they are expensive on long paragraphs and during animation. Keep them on headlines, avoid animating blur, and prefer one or two shadows over five.
Frequently Asked Questions
Can I have multiple shadows?
Yes — comma-separate them. Two layers (a tight dark one plus a wide soft one) read better than a single heavy blur.
Why does the shadow look blocky?
Large blur radii on small text produce visible steps on some GPUs. Reduce blur or increase font weight.
Does text-shadow work on all browsers?
Yes, universally. Only the colour syntax varies historically — modern rgba() works everywhere.
Privacy & Your Data
CSSmith runs entirely in your browser. Whatever you type, paste or upload is processed on your own device and never sent to a server — there is no backend to store it.