CSS Text Shadow Generator
Build single or layered CSS text-shadow effects with a live preview. Stack multiple shadows, tweak offsets, blur, color, and opacity per layer. Copy the full CSS snippet. Runs entirely in your browser.
About this tool
The CSS Text Shadow Generator lets you build single or multi-layer text-shadow effects visually. Adjust horizontal offset, vertical offset, blur radius, color, and opacity for each layer, then copy the ready-to-use CSS.
The text-shadow property
text-shadow accepts one or more comma-separated shadow definitions. Each shadow is specified as h-offset v-offset blur-radius color. Negative offsets move the shadow left or up; a blur of 0 creates a hard-edge shadow.
Stacking multiple shadows
You can layer as many shadows as you like. They are rendered front-to-back, so the first shadow sits on top. This technique enables effects like neon glows (multiple outward blurs in the same hue), retro letterpress (stacked solid offsets in different colors), and embossed text (light shadow up-left, dark shadow down-right).
Converting hex + opacity to rgba()
Because text-shadow does not accept hex-with-alpha notation in all browsers, this tool converts your chosen color and opacity into an rgba() value for maximum compatibility.
Browser support
text-shadow is supported in all modern browsers and has been since IE 10. You can use it safely without any prefixes or fallbacks.
