CSS Text Shadow Generator
Design a CSS text-shadow visually and copy the code.
Shadows on type
A text-shadow adds depth, glow or a lift to text, set by offset, blur and colour. This lets you shape it visually and copies the CSS, so you can get the exact effect — a subtle lift, a soft glow, a retro outline — without editing numbers blind.
Adjust the shadow and copy the text-shadow CSS.
Legibility first, effect second
The main job of a text-shadow is often practical rather than decorative: a subtle shadow behind text placed over an image keeps it readable where the background would otherwise swallow it, which is one of the most useful tricks for captions and hero text. As pure decoration — glows, outlines, layered retro effects — it can be striking but is easily overdone, and heavy shadows can actually hurt legibility, which defeats the point of text. The rule is to let the shadow serve the reading: a gentle one to lift text off a busy background is almost always better than a dramatic one that draws attention to itself.
Frequently asked questions
What is a text-shadow most useful for?
Keeping text readable over an image — a subtle shadow lifts it off a busy background so it does not get swallowed.
Can text-shadows hurt legibility?
Yes — heavy or dramatic shadows can make text harder to read, defeating the point. A gentle shadow that serves the reading is usually best.
Is anything uploaded?
No. It runs entirely in your browser.