CSS Text Shadow Generator
Controls
Preview
Text Shadow
CSS Output
Full Rule
How to Use
- Set offset — Drag X/Y sliders to position the shadow behind your text.
- Adjust blur — Higher values create softer, more diffuse shadows.
- Pick color & opacity — Choose any color and control transparency.
- Stack layers — Add up to 3 shadow layers for complex effects like glow or emboss.
- Copy & paste — Hit "Copy CSS" and use directly in your stylesheet.
What Is CSS Text Shadow?
text-shadow adds one or more shadows to text content. Each shadow takes X offset, Y offset, blur radius, and color — no spread value unlike box-shadow.
Multiple comma-separated shadows create effects like neon glow, letterpress, 3D text, and fire text. Supported in all modern browsers.
Common Use Cases
Tips & Best Practices
Subtle shadows improve legibility on busy backgrounds. Heavy shadows can hurt readability.
Stack 2-3 layers with increasing blur and a bright color on dark background for neon effects.
Use a 1px white shadow below dark text on a medium background for an inset look.
Text shadow is GPU-accelerated. But avoid very large blur values on long paragraphs.
Frequently Asked Questions
What is the difference between text-shadow and box-shadow?
text-shadow follows the shape of each glyph. box-shadow follows the element's border box. Text-shadow has no spread value.
Can I use multiple text shadows?
Yes. Comma-separate values. They render in order — first listed is on top.
Does text-shadow work on all browsers?
Yes. Fully supported in Chrome, Firefox, Safari, and Edge without prefixes.
Can I animate text-shadow?
Yes. text-shadow is animatable with CSS transitions and keyframes. Keep blur values reasonable for smooth animation.