CSS Text Shadow Generator
Generate CSS text shadow effects. Create glowing text, 3D text, embossed effects. Copy text-shadow CSS code.
About this calculator
Type some preview text, choose the text and shadow colours, and adjust offset, blur and opacity. Copy the text-shadow CSS.
Every control updates a live preview and the CSS code at once. Copy the declaration into your stylesheet.
How to use it
- Type the preview text.
- Move the sliders.
- Press Copy.
Text-shadow syntax
text-shadow: offset-x offset-y blur color. There is no spread value. Zero offset with a coloured blur makes a glow. Stack shadows with commas for outlines, 3D and neon effects. A soft shadow such as 0 1px 2px rgba(0,0,0,.3) can improve readability of text over images.
Worked example
Effects
| Soft shadow | 2px 2px 4px rgba(0,0,0,.4) |
| Glow | 0 0 8px #0ff, 0 0 16px #0ff |
| Outline | 1px 1px 0 #000, -1px -1px 0 #000 |
Tips and common mistakes
- Keep blur small for readable text.
- Glows work best on dark backgrounds.
- Check performance with many large shadows.
- Don't rely on shadow alone for contrast.
- Use rgba to blend naturally.
Frequently asked questions
What is text-shadow?
A CSS property that adds shadow to text.
Is there a spread value?
No.
How do I make a glow?
Use zero offset and a coloured blur.
Can I add several shadows?
Yes, comma-separated.
Does it affect accessibility?
Heavy effects can reduce legibility.
Is it supported everywhere?
Yes.