Advertisement
Guide
About the CSS Text Shadow Generator
The CSS text-shadow property does far more than drop a soft shadow behind text. By stacking several layers you can create a neon glow, a hard outline, a retro offset, or a layered 3D extrusion — all without images.
This generator lets you build those effects visually: add layers, adjust offset, blur, color, and opacity, and watch a live preview at your chosen size and colors.
What the values mean
Each shadow is offset-x offset-y blur color. Offsets move the shadow; blur softens it (0 gives a hard edge). Unlike box-shadow, text-shadow has no spread value. Separate multiple shadows with commas — the first one sits on top.
How the classic effects are built
- Glow / neon — zero offset with a large blur in a bright color, often doubled.
- Outline — four hard shadows at 1px in each diagonal direction.
- 3D extrude — several hard shadows stepping 1px further, getting darker.
- Retro — two or three bold, hard, offset shadows in contrasting colors.
Keep it readable
Shadows are decoration, not a substitute for contrast. Heavy effects on body text hurt legibility, so save them for headings and hero text — and check that the text still has enough contrast against its background.
How to use it
- 1Type your preview text and set the size and colors.
- 2Start from a preset like Neon, Outline, or 3D.
- 3Adjust each layer's offset, blur, color, and opacity — add more layers as needed.
- 4Copy the generated text-shadow CSS.
Frequently asked questions
How do I create a text outline with CSS?
Stack four hard shadows (blur 0) offset 1px up-left, up-right, down-left, and down-right in the outline color. The Outline preset does exactly this.
What is the difference between text-shadow and box-shadow?
text-shadow applies to the glyphs themselves and has no spread value or inset option. box-shadow applies to the element box and supports both.
How do I make a neon glow?
Use zero offsets with a large blur in a bright color, then add a second, wider, slightly dimmer layer. Light text on a dark background sells the effect.
Can I use multiple shadows?
Yes — comma-separate them. The first shadow renders on top, which matters when building layered 3D effects.
Is anything uploaded?
No. The preview and CSS are generated entirely in your browser.