Text Shadow Generator
CSS text shadow generator online. Create text-shadow effects with live preview. Multiple shadow layers—free text shadow tool.
T
Need Inspiration?
Check out our collection of 20+ ready-to-use text effects.
Preview
Hello World
Size: 64
Weight:
CSS Code
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
Layers
Properties
Horizontal (X) 2px
Vertical (Y) 2px
Blur Radius 4px
Text Shadow Gallery
Inspiration Gallery
Curated collection of cool text effects
Aa
Soft Drop
Aa
Hard Edge
Aa
Subtle Glow
Aa
Lagging
Aa
Outline
Features
- Add multiple shadows to text
- Visual X/Y/Blur controls
- Color picker with opacity
- Preview with custom font/text
- Layer management
- presets (Neon, 3D, Letterpress)
Common Use Cases
- Improve text readability on busy backgrounds
- Create glowing neon text
- Make 3D or retro style typography
- Create "letterpress" (engraved) effects
- Design creative headers
CSS Text Shadow
The text-shadow property adds shadow to text. It accepts a comma-separated list of shadows, each specified by X offset, Y offset, blur radius, and color.
Syntax:
text-shadow: offset-x offset-y blur-radius color;
Unlike box-shadow, text-shadow does NOT have a "spread" value. To make a shadow larger/thicker, you often need to layer multiple shadows.
Examples
Valid - Basic Drop Shadow
2px 2px 4px rgba(0,0,0,0.5) Valid - Glowing Neon
0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00de Valid - 3D Text
1px 1px #d1d1d1, 2px 2px #d1d1d1, 3px 3px #d1d1d1Frequently Asked Questions
How do I create a text outline (stroke)?
While `text-stroke` exists, it has poor support. A common trick is using 4 text-shadows: `1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000`.
Can I use rgba colors?
Yes, and it's recommended! Using a semi-transparent black (rgba(0,0,0,0.5)) allows the shadow to blend naturally with any background color.
Why is there no spread radius?
The CSS spec for text-shadow doesn't include spread. To simulate spread (thicker shadow), you must stack multiple shadows with slightly different offsets.
💡 Tips
- For a "letterpress" effect (engraved), use a light shadow on the bottom right and a dark shadow on the top left (or vice versa depending on light source).
- Don't overdo blur on small text, it reduces readability.