CSS Text Shadow Generator

Contrast is measured between the text color and what is directly behind each letter, and a shadow does not officially count toward it. Use shadows as decoration, not as the only thing making text legible over a busy image. The reliable combo: pick a text color that already passes contrast on the worst part of the background, then add a subtle shadow (small offset, moderate blur, 40 to 60 percent black) as reinforcement. Avoid hard high-contrast outlines on long body text, they tire the eye fast.

Comma-separated: text-shadow: 1px 1px 0 black, -1px -1px 0 black; renders 2 shadows simultaneously, both contributing to the final pixel value. Browsers composite shadows back-to-front, but text always renders ON TOP. Outline = 4 layers in N/S/E/W directions. 3D extrude = N layers offset progressively. Neon = same X/Y zero offset but increasing blur.

Stack 4 shadows at zero blur in the four cardinal directions: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black. For smoother corners add 4 more diagonals (8-direction outline). The “Outline” preset does this – modify color and width as needed.

Very. Text-shadow renders during the text painting phase (CPU), not as a separate composite layer like box-shadow with blur. Even 10 layers on body text adds barely measurable cost. The exception: animating blur radius – that retriggers paint on every frame. Animate opacity or color instead.

-webkit-text-stroke (now supported by Firefox and Chromium under the unprefixed name text-stroke) draws a true SVG-style stroke around glyphs. Cleaner outlines on curves than 4-direction text-shadow. Downside: no blur, no offset – text-shadow remains the only way for diffuse/glow effects. Combine both: text-stroke: 1px black; text-shadow: 0 0 10px red; for stroked-and-glowing text.

No. The color is solid. For gradient-filled text, use background: linear-gradient(...); -webkit-background-clip: text; color: transparent; separately. You can stack text-shadow ON TOP for outline + glow on gradient text.

Two common reasons: (1) opacity too low (multi-layer effects compound – each layer should be 0.8+); (2) wrong font weight – fire and neon need BOLD or HEAVY weights to look “burning” or “lit”. The presets here use 700 by default; thinner weights look anemic.

Invalid. Spec requires blur ≥ 0. The tool clamps to 0 silently. If you want a “tightening” effect (shadow smaller than text), use -webkit-text-stroke or a positive blur with high opacity.

Most printers ignore shadows entirely – CSS allows it but browsers don’t pass shadows to print drivers. For print versions, use bold/italic emphasis instead. Wrap shadow rules in @media screen { ... } to be explicit.

Yes. Text, colors, fonts, settings – all stay in your browser. Nothing is uploaded.