Text Shadow Generator

The CSS text-shadow property is one of the oldest decorative CSS features — it was first proposed in CSS2 in 1998, dropped from CSS2.1, and then reintroduced in CSS3 Text. It has been universally supported since roughly 2010, predating even border-radius in cross-browser availability. Despite its age, text-shadow remains one of the most underutilised CSS properties, often relegated to a quick `1px 1px 0 black` for basic readability on image backgrounds, when it is capable of far more expressive effects. At its simplest, text-shadow takes three values plus a colour: horizontal offset, vertical offset, blur radius, and colour. The offset values position the shadow relative to the text — positive values push it right and down, negative values push it left and up. A shadow at `(0, 0)` sits directly behind the text and creates a uniform glow when combined with a blur radius. A shadow at `(3px, 3px)` with zero blur creates the classic solid drop shadow used for memes and bold headings. A shadow at `(0, 0)` with a 10px blur and a complementary colour creates a neon glow effect popular in dark-mode designs. What makes text-shadow genuinely powerful is that it is a comma-separated list — you can stack multiple shadows on a single element, each with its own offset, blur, and colour. A three-layer text-shadow with increasing blur and decreasing opacity creates a smooth, realistic 3D extrusion effect that feels tactile and premium. The layered technique works because each shadow is rendered in order, from back to front, with earlier shadows appearing behind later ones. A common recipe for a 3D text effect is: ```css text-shadow: 0 1px 0 rgba(0,0,0,0.8), 0 2px 2px rgba(0,0,0,0.6), 0 4px 4px rgba(0,0,0,0.4), 0 8px 8px rgba(0,0,0,0.2); ``` This produces a gradual fade from dark to light that mimics how light casts shadows in three dimensions — sharpest and darkest nearest the surface, softer and lighter as distance increases. This tool generates a single shadow to keep the interface approachable, but the CSS output is deliberately formatted so you can duplicate the line, tweak the values, and build your own layered effect. Colour choice is where most text shadows go wrong. A black shadow at full opacity on white text is harsh and amateur — it reads as an outline, not a shadow. Lowering the opacity to 0.2 or 0.3 and adding a blur creates a soft, natural shadow that lifts the text without screaming "I used text-shadow." Red shadows on dark backgrounds create horror or gaming aesthetics; blue and purple shadows create neon and cyberpunk vibes; white shadows on dark text create an embossed or engraved look. The colour picker and preview combination in this tool is designed to encourage this kind of deliberate, aesthetic colour experimentation rather than defaulting to black. The blur radius in text-shadow behaves similarly to the blur in box-shadow — zero gives a hard, crisp shadow edge; higher values soften the edge into a Gaussian fade. However, large blur radii on text are more expensive to render than on boxes because the glyph shapes are more complex than rectangles. A 50px blur on a paragraph of text triggers per-glyph shadow calculations that can impact scroll performance on low-power devices. For production use, keep text-shadow blur under 20px for body text and reserve larger blurs for isolated headings where the performance cost is amortised over fewer characters. The ability to edit the preview text directly is crucial because shadows look completely different on different letters. A shadow that works beautifully on a short, bold heading like "HERO" may look muddy and illegible on a long sentence of lighter body text. The descenders in letters like g, j, p, q, and y interact differently with vertical shadows than ascenders like b, d, f, h do. A shadow with a positive vertical offset (pushing down) will overlap with the line below on multi-line text, which can make reading difficult if the shadow is too dark or too large. The tool\'s text content input lets you paste your actual copy into the preview so you can verify legibility before committing the style. The font size slider (12px to 72px) is paired with a text colour picker to complete the typography preview. Changing the font size does not change the shadow parameters — the offsets and blur remain in pixels — so a shadow that looks balanced at 48px may feel too heavy at 16px. This is by design, because it forces you to consider the relationship between text size and shadow size. For responsive typography where the same text element has different font sizes at different breakpoints, consider using a clamp() or calc() function in your actual CSS rather than a fixed pixel shadow — the tool gives you the base values, and you can adapt them to fluid sizing in production.