Design · 3 min read
CSS text-shadow: Readable Text and Stylish Effects
text-shadow is a small property with two very different uses: quietly rescuing the readability of text placed over photos, and loudly decorating headings with glows and retro 3D effects.
Try it yourself with the related tool.
Design a text-shadow →Advertisement
Syntax
text-shadow: 1px 2px 4px rgb(0 0 0 / 0.5) takes a horizontal offset, a vertical offset, an optional blur, and a colour. Unlike box-shadow, there is no spread value and no inset. Multiple shadows are separated by commas, and the first one is drawn on top.
Text over images
White text over a busy photo can fail contrast in some spots. A soft, dark shadow such as 0 1px 3px rgb(0 0 0 / 0.6) gives every letter its own backdrop. For long text, a semi-transparent overlay behind the text is still more reliable — check contrast either way.
Effects
A glow is a zero-offset shadow with a large blur in a bright colour, often stacked two or three times. An outline uses four 1px shadows offset in each direction. A 3D or retro effect stacks several hard shadows offset by 1px each. Use effects for short display text only — they hurt readability in body copy.