TooldenTOOLDENDEVELOPERON-DEVICE
Text Shadow Generator
Tune offsets, blur and color for the perfect CSS text-shadow, watch the preview update live, and copy the code.
HOW TO USE
- 1Adjust the horizontal and vertical offsets. Positive values move the shadow right and down, negative values left and up.
- 2Increase blur to soften the shadow edge. A small blur keeps text readable, a large one creates a glow effect.
- 3Pick a color with the swatch or type any hex value, then copy the generated text-shadow declaration with one click.
EXAMPLE
INPUT
x: 2px, y: 2px, blur: 4px, color: #000000
OUTPUT
text-shadow: 2px 2px 4px #000000;
FAQ
What do negative offsets do?
They move the shadow up and to the left, which is the classic way to make text look raised or embossed.
How do I create a glow effect?
Use a large blur with a small or zero offset and a bright color. The bigger the blur, the softer the glow — dark text on dark backgrounds needs a light glow color.
Can I use multiple text shadows?
Yes — comma-join several text-shadow values to layer shadows, for example an outline effect uses multiple stacked offsets of the same color.
Why is my shadow barely visible?
A dark shadow on a dark background, or a blur so large it spreads beyond the text, can vanish. Try a lighter page background or a smaller blur.
Is my data sent anywhere?
No. All code is generated entirely in your browser, your settings never leave your device.