Text Shadow Generator
Drag X/Y offset, blur, and color sliders and watch the live preview. Stack multiple layers to build neon glows, outlines, and 3D extrude effects.
Shadow layers
How to Use
Set X/Y offset, blur, and color per layer. Sliders update the preview instantly.
Use + to stack up to 5 shadow layers. Multi-layer is how you build neon glows, outlines, and origami-style folds.
Copy the resulting text-shadow CSS in one click. Font, size, color, and background are also visible in the preview.
FAQ
How many layers can I stack?
Up to 5. Neon usually needs 4–5; outlines need just 4.
Why isn't there a spread value?
The CSS spec for text-shadow only supports X, Y, blur, and color — no spread (unlike box-shadow).
How do I make a text outline?
Stack four same-colored shadows at (1,0), (-1,0), (0,1), (0,-1) with blur=0 to fake an outline. For thicker strokes, use -webkit-text-stroke instead.
The preview font differs — will the result match?
The preview uses your system default font, but the text-shadow CSS applies identically to any font. Bolder fonts tend to make shadows look heavier.
Is anything sent to a server?
No. Everything runs in your browser; the generated CSS never leaves the page.
