Build text-shadow with x, y, blur, color — includes neon/retro presets. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.
Use Cases
Web designers creating neon glow effects for landing page headlines
Frontend developers adding depth to typography with subtle drop shadows
Retro-themed site builders applying 80s-style text glow effects
UI designers prototyping embossed or letterpress text styles visually
Tips
Use the neon preset for glowing text effects popular in retro designs
Stack multiple text-shadow values for complex layered shadow effects
Adjust blur radius to control shadow softness from sharp to diffused
Fun Facts
CSS text-shadow was originally defined in CSS2 (1998) but was removed in CSS2.1 because no browser implemented it — it was reintroduced in CSS3 and finally supported around 2009.
The famous 'letterpress' text effect — a subtle 1px white shadow below dark text — was one of the most popular CSS text-shadow techniques in the Web 2.0 era (2005-2010).
Multiple text-shadow values are rendered in back-to-front order, meaning the first shadow in your comma-separated list appears on top of all subsequent shadows.
FAQ
Can I layer multiple shadows?
Yes — add as many as you want. Layered shadows are how the neon and retro-gaming presets work (multiple offsets building up a glow).
Does it preview against different backgrounds?
Toggle dark/light background in the preview. Text shadows behave very differently against dark backgrounds (glow) vs light (soft shadow).
What about accessibility?
Heavy text shadows reduce contrast. The tool shows a contrast-ratio estimate — aim for 4.5:1 for body text, 3:1 for large text.
Can I convert to filter: drop-shadow()?
Yes — toggle output mode. drop-shadow() is more performant on transforms but doesn't cascade into child text like text-shadow does.
