Skip to content
Visuals and effects

text-shadow

Adds one or more shadows to text. It powers glow, embossed, and layered 3D type effects.

646 effects in the catalog use this property.

Syntax

text-shadow: <x> <y> <blur> <color> [, ...];

Watch out

Unlike `box-shadow`, `text-shadow` has no spread radius. Build a thicker glow by stacking the same color with progressively larger blur values.

Common values

0 0 8px currentColor
Neon glow
1px 1px 0 #000, 2px 2px 0 #000
Layered shadows that create 3D depth

Effects using text-shadow

These are working effects from the catalog. Open a tile to inspect the full source.