CSS text-shadow generator
Compose a CSS text-shadow with a live preview, then copy the rule.
Runs 100% in your browser snip.tools
How to use the text-shadow generator
- Adjust the sliders. Set offsets, blur and color — the preview re-renders live.
- Copy the rule. Click Copy to grab the text-shadow value and a ready-to-use CSS block.
About text-shadow
text-shadow takes offset-x, offset-y, blur-radius and color — no spread, unlike
box-shadow. Common patterns: a tiny dark-low-alpha shadow to lift light text off a
busy background; a zero-offset large-blur saturated color to glow; a stacked list of shadows
(separate with commas) for retro or neon effects. Keep the underlying text-vs-background
contrast strong enough to pass WCAG without depending on the shadow.
Frequently asked questions
- A CSS property that draws a shadow behind text — defined as offset-x offset-y blur-radius color. Unlike box-shadow, there is no spread component.
- Yes, separate with commas. This tool focuses on one layer; copy and append more for retro/neon stacked effects.
- Zero offsets, large blur, and a saturated color — for example 0 0 16px rgba(56,189,248,0.8). Stack two with different blurs for a brighter glow.
- Heavy shadows can hurt readability. Keep contrast high enough that the text would still be legible without the shadow; the shadow should add depth, not carry the contrast.