CSS Text Shadow Generator

Design CSS text shadows with offset, blur, colour and opacity, previewed on your own text.

How does CSS text-shadow work?

The CSS text-shadow property adds a shadow behind text, defined by horizontal offset, vertical offset, blur radius and colour. It can make headings stand out or improve readability on images.

Syntax

text-shadow: x-offset y-offset blur colour;

Popular effects

Subtle depth: 0 1px 2px rgba(0,0,0,.3)
Text on photos: 0 2px 8px rgba(0,0,0,.6) keeps white text readable on busy images.
Glow: 0 0 12px rgba(0,191,99,.8) with zero offset.

Type your own text and choose text and background colours to see the effect in context. Combine several shadows with commas for outlines or neon effects.

Frequently asked questions

Does text-shadow affect SEO?

No, it is purely visual; the text stays normal, indexable text.

Can I outline text with text-shadow?

Yes, by combining four shadows offset in each direction, or use -webkit-text-stroke.

Is text-shadow bad for performance?

Small shadows are cheap; avoid very large blurs on long animated text.