CSS text-shadow generator
Adjust the offset, blur and color of a CSS text shadow and instantly get the matching text-shadow value, with a live preview. 100% local calculation in your browser — nothing is sent to a server.
How it works
The CSS text-shadow property accepts a horizontal offset, a vertical offset, an optional blur radius, and a color. This tool lets you adjust each value with sliders and see the result immediately on sample text, so you can create a raised, glowing, or retro effect without guessing values by hand.
Can I stack multiple shadows on the same text?
Yes, the text-shadow property accepts multiple declarations separated by commas (for example, for a neon effect with several overlapping halos). This tool generates one shadow at a time; you can copy the result and combine it with other values manually if needed.
How do I get a convincing neon effect?
Set the horizontal and vertical offsets to 0, increase the blur strongly, and choose a bright color on a dark background: that’s exactly the combination used by the “Neon effect” preset above.
No data leaves your device: the calculation and preview are generated entirely locally by your browser.