CSS Text-Shadow Generator
Adjust the X/Y offset, blur radius, and color of each layer and watch your sample text and the generated CSS update instantly. Stack up to 8 shadow layers, or start from a preset such as neon, outline, or emboss. The generated text-shadow declaration can be copied with one click. For shadows on boxes, try the CSS Box-Shadow Generator.
🔒 Runs in your browser · Your data is never sent to a server
Presets
Preview
Shadow layers
You can have between 1 and 8 shadow layers.
Notes
- Unlike box-shadow, text-shadow has no spread radius and no inset keyword.
- The color picker only accepts 6-digit hex values (no alpha channel). For a semi-transparent shadow, edit the color in the generated CSS to `rgba()` or similar.
- When several shadows are listed, the first one is painted on top.
- Stacking many large-blur layers can make rendering slower.
Glossary
text-shadow
The CSS property that adds a shadow to text, written as `text-shadow: X Y blur color;`. Multiple shadows can be layered with commas.
Offset
How far the shadow is shifted. A positive X moves it right (negative left); a positive Y moves it down (negative up).
Blur radius
How soft the shadow edge is. 0 gives a sharp shadow; larger values spread it wider and smoother.
FAQ
Does text-shadow have spread or inset like box-shadow?
No. text-shadow takes only four values: X offset, Y offset, blur, and color. To fake an outline, stack several zero-blur shadows around the text.
How do I make a neon text effect?
Pick the "Neon" preset. A small white shadow is layered with colored shadows of increasing blur at the same position, which reads as a glow. It looks best on a dark background.
Which shadow is drawn on top when I stack several?
The first shadow in the list is painted on top. When combining an outline with a glow, put the outline shadows first.
How can I make the shadow semi-transparent?
The color picker only supports 6-digit hex, so edit the color in the generated CSS by hand, for example to `rgba(0 0 0 / 0.5)`.
Share this page