How to create a text shadow
- Start from a preset: Soft, Glow, Retro, Outline or Long shadow.
- Adjust each layer's horizontal and vertical offset, blur, color and opacity. Add layers for richer effects.
- Change the background color to see the effect in context, then copy the CSS.
The text-shadow syntax
text-shadow: x y blur color. Unlike box-shadow, there is no spread and no inset. Multiple shadows are separated by commas, and the first one is drawn on top. A small offset with a soft blur (0 2px 4px at 30% opacity) improves legibility of white text on photos. A glow uses zero offset with a large blur in a bright color, stacked two or three times for a neon look. An outline uses four 1px shadows in each diagonal direction, a useful fallback where -webkit-text-stroke is not enough. Long shadows stack many 1px steps in the same direction.
Shadows do not affect layout and are cheap to render for headings, but heavy multi-layer shadows on large blocks of body text can hurt readability and performance. Keep contrast in mind: a shadow should help the text stand out, not blur its edges.
FAQ
How do I add an outline to text in CSS?
Use the Outline preset (four 1px shadows), or -webkit-text-stroke for a true stroke in modern browsers.
How do I make neon text?
Use the Glow preset: zero offset, large blur and a bright color, repeated two or three times.
Does text-shadow support spread?
No. Only box-shadow has a spread value.