CSS Text Shadow
The CSS Text Shadow Generator sets text-shadow offset, blur, color and opacity with live preview and lets you stack multiple shadow layers for glow, outline and 3D text effects.
About this tool
The CSS Text Shadow Generator sets text-shadow offset, blur, color and opacity with live preview and lets you stack multiple shadow layers for glow, outline and 3D text effects.
How to use it
- Adjust horizontal and vertical offset and blur.
- Pick the shadow color and opacity, plus text color and size.
- Click Add Layer to stack another shadow; Reset Layers starts over.
- Click Copy CSS.
Good to know
- text-shadow syntax is: offset-x offset-y blur-radius color.
- Unlike box-shadow, text-shadow has no spread value or inset keyword.
- Multiple shadows are separated by commas and painted with the first one on top.
- A zero-offset shadow with blur creates a glow effect.
- Stacking several 1 px offsets builds a 3D or letterpress look.
Runs entirely in your browser — nothing you enter is uploaded or stored.
Frequently asked questions
How do I add a shadow to text in CSS?
Use text-shadow, for example text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
How do I make glowing text?
Use zero offsets with a blur and a bright color, for example text-shadow: 0 0 8px #1db954; stack layers for a stronger glow.
Can I use more than one text shadow?
Yes. Separate shadows with commas; this tool adds each layer for you.
Does text-shadow affect readability?
Subtle shadows can improve legibility on images, but heavy shadows reduce clarity — check contrast with a contrast checker.