🔤 CSS Text Shadow Generator
Style a text-shadow with offset, blur and colour and copy the CSS. The live preview shows the effect on real text as you adjust it.
text-shadow: 2px 2px 4px rgba(30, 41, 59, 0.5);How the css text shadow generator works
text-shadow works like box-shadow but applies to the glyphs of text: it takes a horizontal offset, a vertical offset, a blur radius, and a colour. This generator previews the effect on sample text and rebuilds the CSS as you change each value. A tight, dark shadow adds depth; a zero-offset coloured blur creates a neon glow; stacking several shadows (which you can do by comma-separating in CSS) can fake an outline or a layered 3D effect. The code is generated locally and never uploaded.
Keep text readable: heavy shadows hurt legibility, especially on small text. For a subtle lift, use a 1px vertical offset and a low-opacity colour. For a glow, set both offsets to 0 and raise the blur with a bright colour.
Frequently asked questions
How do I create a neon text glow?
Set the horizontal and vertical offsets to 0, raise the blur, and use a bright colour. Stacking two or three of these with increasing blur (comma-separated in CSS) intensifies the neon effect.
How do I make a text outline with text-shadow?
Layer four shadows at small offsets (for example -1px -1px, 1px -1px, -1px 1px, 1px 1px) in the same colour, with 0 blur. That approximates an outline. For a true outline, CSS also offers -webkit-text-stroke.
What is the difference between text-shadow and box-shadow?
text-shadow applies to the text characters themselves; box-shadow applies to the element's rectangular box. text-shadow has no spread value and no inset keyword.
Does text-shadow affect layout?
No. Like box-shadow, text-shadow is painted and does not take up layout space or push other elements around, so you can add it without reflowing the page.
Is my text or CSS uploaded?
No. Everything is rendered and generated in your browser; nothing is sent anywhere.