Text-shadow generator
Compose multi-layer text shadows with a live preview and copy-ready CSS.
- Instant
- Free
- Private (processed locally)
- No sign-up
Tailor-made text shadows
Set offset, blur, color and opacity, add a second layer, and get the text-shadow property with a live preview on the text.
-
Set layer 1
X, Y, blur, color, opacity.
-
Enable layer 2
For an outline or a glow.
-
Copy the CSS
A single property, ready to paste.
Anatomy of the property
| Part | Example | Role |
|---|---|---|
| Offset X | 2px | Horizontal (negative = left) |
| Offset Y | 2px | Vertical (negative = up) |
| Blur | 4px | Shadow spread |
| Color | rgba(124, 58, 237, 0.5) | Hue and opacity |
Default layer: text-shadow: 2px 2px 4px rgba(124, 58, 237, 0.5);. Preview and calculation 100% local.
Frequently asked questions
How does text-shadow work?
The property takes, in order: horizontal offset X, vertical offset Y, blur radius, then the color. Example: text-shadow: 2px 2px 4px rgba(124, 58, 237, 0.5). Negative values shift left/up.
Can you stack multiple shadows?
Yes, separated by commas. This tool offers two layers: the first draws the main shadow, the second (optional) adds an outline or glow of another color.
How do I create a glow effect?
Set X and Y to 0, increase the blur and choose a vivid color with good opacity. The light spreads evenly around the text. Duplicate the layer to intensify.
Does the shadow hurt readability?
A too-strong shadow can get in the way. For body text, keep a light blur and moderate opacity; reserve pronounced effects for large headings. The preview helps you judge.