Text-shadow workbench with typography stage and AAA halo gate

What does the Text-Shadow Generator do?

The generator is a workbench focused exclusively on the CSS text-shadow property. In contrast to the CSS Shadow Generator — which covers three properties in parallel — you get five specialised levers for pure text effects here: typography stage, AAA halo gate, -webkit-text-stroke companion, Tailwind v4 utility emitter and a Neo-Brutalism preset pack.

Up to eight shadow layers can be stacked, each with X and Y offsets (±50 px), blur (0-100 px) and colour (6- or 8-digit hex including alpha). A live preview renders the stack at the chosen typography stage — display 72 px, h1 40 px, body 16 px, caption 12 px or code 14 px monospace. Switch between light and dark backgrounds with a click and set text and background colours per theme.

25 curated presets across six categories cover the canonical text-shadow moves: drop (soft-drop 1/2/3, long-drop), glow (neon-cyan, neon-magenta, pulse-amber, soft halo), 3D-extrude (3D extrude, layered-block, long-hard-45), letterpress (embossed, debossed, carved, paper inset), retro (vaporwave, 80s chrome, newspaper print, typewriter) and neo-brutalism (brutal black, brutal color, brutal stamp, brutal sticker).

Why a dedicated tool just for text-shadow?

text-shadow has its own readability characteristics. Shadows behind glyphs behave differently than behind cards: an 8-px blur that gives subtle depth on a card eats the glyph on body text. The readability heuristic differs from the box-shadow case — for cards only text-vs-background matters, for text-shadow shadow-vs-text matters too. A shadow that gets too close to the foreground text merges with the glyph instead of lifting it from the background.

Specialised tools render better than workbenches when the use-case is narrow enough. You don’t need a 3-property tab switch, no surface-recipe picker, no drop-shadow filter chain — you’re building a headline and want to see it at five sizes and check it against halo traps. That is exactly what this tool does.

How does the typography-stage preview work?

The typography stage is the only lever in the tool that does not flow into the CSS output — it is a preview switch. You cycle between five preset tiers, each mapped to a typical use-case.

Display (72 px, Inter Bold, line-height 1.05): hero headlines, splash screens, above-the-fold statements. At this size shadows have room to carry wide blur values. Neo-Brutalism offsets above 6 px land particularly strong here.

H1 (40 px, Inter Bold, line-height 1.1): classic section heading. Shadows need tighter values than at display size — 1-2 px drop is usually enough, larger stacks feel overloaded.

Body (16 px, Inter Regular, line-height 1.5): browser-default body text. This size reveals the blur-halo trap: a 10-px blur that looks elegant on display headlines makes body text feel fuzzy and hard to read. The gate flags it automatically.

Caption (12 px, Inter Medium, line-height 1.4): image captions, footnotes, small pills. Shadows are risky at this size — every extra pixel hurts readability. Usually 0-1 px drop with 1 px blur is the ceiling.

Code (14 px, JetBrains Mono Medium, line-height 1.5): monospaced samples. Shadows on code often look messy because the uniform glyph spacing makes the halo overly visible. The stage gives you a sanity check in case you do need shadows on code in, say, a marketing hero.

How does the AAA halo readability gate read?

Three axes, each computed live:

Axis 1 — text vs background (WCAG 2.2 SC 1.4.6 AAA): body text needs 7:1, large text (≥ 18 pt or 14 pt bold) 4.5:1. Below 4.5:1 the gate goes orange — the stack is only acceptable as a headline. Below 3:1 the gate goes red — no halo can save this, text or background colour must change.

Axis 2 — shadow vs background (WCAG 2.2 SC 1.4.11): structural graphic components need 3:1. If the shadow is meant to carry readability (typical case: white text on a light photo), it must not drop below 3:1 or it fails its job. The gate shows the value numerically in the preview box.

Axis 3 — glow-trap heuristic: if the shadow is closer to the text colour than to the background, the halo merges with the glyph instead of lifting it. The value is shown as shadow-vs-text contrast. When shadow-vs-text contrast drifts well below shadow-vs-background contrast and both fall under 1.5:1, the gate flags it explicitly — the classic Firefox a11y issue 1834-style failure.

Plus: blur-halo warning: on body text (≤ 16 px) with blur > 10 px, the gate raises the WebAIM low-vision guidance — blurred halos around body text can overwhelm readers with dyslexia or low vision.

How does the -webkit-text-stroke companion work?

For an outline effect you have two paths on the web: the traditional 4-direction text-shadow fake-stroke (four layers at ±X, ±Y with blur 0) or the modern -webkit-text-stroke plus paint-order: stroke fill. Both produce similar results but have different trade-offs.

-webkit-text-stroke is crisp and scales with font-size — a 1-px outline stays a 1-px outline whether the headline is 16 px or 96 px. Plus: paint-order: stroke fill renders the stroke BEHIND the fill instead of in front, so thin glyph contours don’t get overlaid by the outline. Browser support: Chromium, Safari and Firefox all ≥ 2023.

The text-shadow fake-stroke has advantages for thicker outlines (above 2 px) and for adding blur — -webkit-text-stroke cannot blur. Older browsers that don’t know paint-order fall back to the fake-stroke.

The generator emits both patterns side by side in one output box. You copy both into the stylesheet and decide at implementation time which variant wins — or wrap both in an @supports block and let the browser route.

What does the Tailwind v4 output emit?

Tailwind v4.1 ships five built-in text-shadow-* sizes (text-shadow-sm, text-shadow, text-shadow-md, text-shadow-lg, text-shadow-xl). These cover simple drop shadows but no neon stacks, no 3D-extrude and no neo-brutalist offsets. The generator emits three Tailwind integration patterns in parallel — pick one:

Pattern 1 — @utility block (recommended for design-token reuse):

@utility text-shadow-neon-cyan {
  text-shadow: 0px 0px 4px #00FFFF, 0px 0px 12px #00FFFFCC, 0px 0px 24px #00FFFF80;
}

class="text-shadow-neon-cyan" becomes a first-class utility that composes with hover:, focus:, dark: and responsive variants.

Pattern 2 — Arbitrary value (no theme edit needed):

<h1 class="[text-shadow:0px_0px_4px_#00FFFF,_0px_0px_12px_#00FFFFCC]">…</h1>

Good for one-offs where you don’t need a reusable utility.

Pattern 3 — @theme variable (for var() reuse):

@theme {
  --text-shadow-neon-cyan: 0px 0px 4px #00FFFF, 0px 0px 12px #00FFFFCC, 0px 0px 24px #00FFFF80;
}

.headline { text-shadow: var(--text-shadow-neon-cyan); }

Handy when the variable should be reused across multiple CSS properties (e.g. text-shadow on the headline plus filter: drop-shadow on an icon sharing the same colour identity).

What is the Neo-Brutalism preset pack?

Neo-Brutalism is the 2026 counter-trend to refined minimalism: hard edges, high contrasts, no translucency. In the text-shadow context that means hard offsets of 4-8 px, zero blur, a single flat colour per shadow and no alpha gradients. The pack ships four presets:

Brutal Black: yellow text on white background, 6-px black offset. Looks like a poster stamp from analogue print.

Brutal Color: white text on black background, 8-px pink offset. High recognition value for brutalism-leaning brands.

Brutal Stamp: double shadow — layer 1 in accent colour, layer 2 in black offset further. Yields a complementary stamp-on-stamp effect.

Brutal Sticker: double shadow — layer 1 in white as highlight, layer 2 in black offset. Reads like a plastic-outlined sticker.

All four presets are WCAG-aware: hard offsets are usually contrast-safe because no translucency dilutes the colour separation. The halo gate doesn’t flag them as long as text-vs-background stays above 4.5:1 — which holds for the preset colour pairs.

How does the tool save my configuration?

It doesn’t. Pure-client, no upload, no server, no localStorage, no cookies, no tracking. Closing the tab discards everything. The browser engine computes every shadow locally — even eight-layer stacks render smooth in the live preview.

To save a configuration across sessions, copy the CSS or Tailwind output into your stylesheet. That is the upside of text-shadow as a CSS property: the full configuration sits in one declaration and needs no external file.