Text Shadow Generator
text-shadow from presets — soft drop, hard offset, long shadow, neon glow, 3-D extrusion, outline — or your own layers, with angle, blur, opacity and preview.
The text-shadow value with every layer, the CSS rule, a preview of the text on a background you choose, the layer count and a note when the shadow is heavy to render.
Example: Soft drop at 45° and 4 px is 2.8px 2.8px 8px rgba(0,0,0,.4); a 20-step long shadow fades from 57 % to 3 %; neon stacks a white core and four glows of the same hue; outline is eight 2 px offsets.
Layers of offset, blur
and colour.
How text-shadow layers work, what the presets build, and when the shadow costs too much.
The property
text-shadow takes a comma-separated list of layers, each "offset-x offset-y blur-radius colour"; the first layer is painted on top and later ones underneath, all behind the glyphs themselves. Blur is a Gaussian radius, so a value of 8 px spreads roughly 16 px. Shadows never affect layout or the element's box.
Presets
Soft and hard are one layer at the angle and distance you set (x = d·cos θ, y = d·sin θ), with or without blur. Long shadow and 3-D extrusion stack one 1 px (or ½ px) step per layer along the angle, the long shadow fading out; neon layers a white core and widening glows of the same colour with no offset; outline uses eight 1-step offsets around the glyph; emboss pairs a light highlight above with a dark shadow below; retro alternates colour and white steps.
Cost
Every layer is rasterised for every glyph on every paint, so a 40-layer long shadow on a heading is fine and on paragraph text is not; the page flags more than 20 layers. For a true outline prefer -webkit-text-stroke; for animated text keep layers few. Nothing leaves the browser; the same four anonymous usage counts as the rest of the site apply.
SOURCES
- CSS Text Decoration Level 3 text-shadow (offset-x offset-y blur colour per layer, first layer on top); long shadow and extrusion as stacked 1 px offsets
Last reviewed 22 September 2026. How results are checked: How we verify.