Text-Shadow-Werkbank mit Typografie-Bühne und AAA-Halo-Gate

Was macht der Text-Shadow-Generator?

Der Generator ist eine Werkbank, die ausschließlich auf das CSS-text-shadow-Property fokussiert. Im Gegensatz zum CSS-Shadow-Generator, der drei Properties parallel abdeckt, bekommst du hier fünf spezialisierte Hebel für reinen Text-Effekt: Typografie-Bühne, AAA-Halo-Gate, -webkit-text-stroke-Companion, Tailwind-v4-Utility-Emitter und ein Neo-Brutalismus-Preset-Pack.

Bis zu acht Schatten-Ebenen lassen sich stapeln, jede mit X- und Y-Versatz (±50 px), Weichzeichnung (0-100 px) und Farbe (6- oder 8-stelliger Hex inkl. Alpha). Eine Live-Vorschau zeigt den Stack in der gewählten Typografie-Stufe gerendert — Display 72 px, H1 40 px, Body 16 px, Caption 12 px oder Code 14 px monospace. Du wechselst zwischen hellem und dunklem Hintergrund mit einem Klick und setzt Text- und Hintergrundfarbe pro Theme.

25 kuratierte Presets über sechs Kategorien decken die kanonischen Text-Shadow-Moves ab: Drop (Soft-Drop 1/2/3, Long-Drop), Glow (Neon-Cyan, Neon-Magenta, Pulse-Bernstein, Sanfter Halo), 3D-Extrude (3D-Extrude, Block-geschichtet, Lang-Hart-45), Letterpress (Geprägt, Vertieft, Eingraviert, Papier-Inset), Retro (Vaporwave, 80er-Chrome, Zeitungsdruck, Schreibmaschine) und Neo-Brutalismus (Brutal Schwarz, Brutal Farbe, Brutal Stempel, Brutal Sticker).

Warum ein eigenes Tool nur für Text-Shadow?

text-shadow hat eine eigene Lese-Charakteristik. Schatten hinter Glyphen verhalten sich anders als hinter Karten: ein 8-px-Blur, der auf einer Karte dezente Tiefe gibt, frisst bei Body-Text den Glyph. Die Lesbarkeits-Heuristik unterscheidet sich vom box-shadow-Fall — bei Karten zählt nur Text-vs.-Hintergrund, bei text-shadow auch Schatten-vs.-Text. Ein Schatten, der dem Vordergrund-Text zu ähnlich ist, verschmilzt mit dem Glyph statt ihn vom Hintergrund abzuheben.

Spezialisten-Tools rendern besser als Werkbänke, wenn der Use-Case eng genug ist. Du brauchst keinen 3-Property-Tab-Switch, kein Surface-Rezept-Picker, keine Drop-Shadow-Filter-Chain — du baust eine Headline und willst sie in fünf Größen sehen und gegen Halo-Fallen prüfen. Genau das macht dieses Tool.

Wie funktioniert die Typografie-Bühnen-Vorschau?

Die Typografie-Bühne ist der einzige Hebel im Tool, der nicht in den CSS-Output fließt — sie ist ein Vorschau-Switch. Du wechselst zwischen fünf vordefinierten Stufen, jede gemappt auf einen typischen Use-Case.

Display (72 px, Inter Bold, line-height 1.05): Hero-Headlines, Splash-Screens, Above-the-Fold-Statements. In dieser Größe haben Schatten genug Platz, um auch breite Blur-Werte zu tragen. Neo-Brutalismus-Offsets über 6 px wirken hier besonders stark.

H1 (40 px, Inter Bold, line-height 1.1): Klassische Section-Heading-Größe. Schatten brauchen hier engere Werte als bei Display — 1-2 px Drop ist meist genug, größere Stacks wirken überladen.

Body (16 px, Inter Regular, line-height 1.5): Browser-Default-Fließtext. In dieser Größe zeigt sich die Blur-Halo-Falle: 10-px-Blur, der bei Display elegant wirkt, lässt Body-Text verschwommen und schwer lesbar erscheinen. Das Gate flaggt das automatisch.

Caption (12 px, Inter Medium, line-height 1.4): Bildunterschriften, Footnotes, kleine Pillen. Schatten sind hier riskant — jeder Pixel mehr drückt die Lesbarkeit. Meist reicht 0-1 px Drop mit 1 px Blur.

Code (14 px, JetBrains Mono Medium, line-height 1.5): Mono-Spaced-Samples. Schatten auf Code sehen oft unsauber aus, weil die gleichmäßigen Glyphen-Abstände den Halo überdeutlich zeigen. Stage gibt dir aber einen Sanity-Check, falls du etwa Schatten auf Code in einem Marketing-Hero brauchst.

Wie liest das AAA-Halo-Lesbarkeits-Gate?

Drei Achsen, jede live gerechnet:

Achse 1 — Text-vs.-Hintergrund (WCAG 2.2 SC 1.4.6 AAA): Fließtext braucht 7:1, Large-Text (≥ 18 pt oder 14 pt bold) 4.5:1. Liegt der Wert unter 4.5:1, fällt das Gate auf orange — der Stack ist nur als Headline akzeptabel. Liegt er unter 3:1, fällt das Gate auf rot — kein Halo kann das retten, Text- oder Hintergrund-Farbe muss geändert werden.

Achse 2 — Schatten-vs.-Hintergrund (WCAG 2.2 SC 1.4.11): Strukturelle Grafik-Komponenten brauchen 3:1. Wenn der Schatten als Lesbarkeits-Stütze gedacht ist (typisch bei weißem Text auf hellem Bild), darf er nicht unter 3:1 fallen, sonst trägt er den Text nicht. Das Gate zeigt den Wert numerisch in der Vorschau-Box.

Achse 3 — Glow-Trap-Heuristik: Wenn der Schatten näher an der Text-Farbe als am Hintergrund liegt, verschmilzt der Halo mit dem Glyph statt ihn abzuheben. Der Wert ist als Schatten-vs.-Text-Kontrast sichtbar. Sobald shadow-vs-text-Kontrast deutlich unter dem shadow-vs-bg-Wert liegt und beide unter 1.5:1 driften, warnt das Gate explizit — der typische Firefox-A11y-Issue-1834-Fall.

Plus: Blur-Halo-Warnung: Bei Body-Text (≤ 16 px) und Blur > 10 px flaggt das Gate die WebAIM-Low-Vision-Guidance — verschwommene Haloes um Body-Text können Leser mit Dyslexie oder Sehschwäche überfordern.

Wie funktioniert der -webkit-text-stroke-Companion?

Wenn du eine Outline-Effekt brauchst, gibt es zwei Wege im Web: den traditionellen 4-Richtungs-text-shadow-Fake-Stroke (vier Layer bei ±X, ±Y mit Blur 0) oder den modernen -webkit-text-stroke plus paint-order: stroke fill. Beide ergeben ähnliche Resultate, haben aber unterschiedliche Trade-offs.

-webkit-text-stroke ist crisp und skaliert mit der Schriftgröße — eine 1-px-Outline bleibt eine 1-px-Outline, egal ob die Headline 16 px oder 96 px ist. Plus: paint-order: stroke fill rendert den Stroke HINTER dem Fill statt davor, damit dünne Glyphen-Wölbungen nicht von der Outline überlagert werden. Browser-Support: Chromium, Safari und Firefox alle ≥ 2023.

Der text-shadow-Fake-Stroke hat dafür Vorteile bei dickeren Outlines (über 2 px) und beim Hinzufügen von Blur — -webkit-text-stroke kann keine Weichzeichnung. Ältere Browser, die paint-order nicht kennen, fallen auf den Fake-Stroke zurück.

Der Generator emittiert beide Patterns nebeneinander in einer Output-Box. Du kopierst beides ins Stylesheet und entscheidest bei der Implementierung, welche Variante gewinnt — oder schreibst beide in ein @supports-Block und lässt den Browser routen.

Was emittiert der Tailwind-v4-Output?

Tailwind v4.1 hat fünf eingebaute text-shadow-*-Größen (text-shadow-sm, text-shadow, text-shadow-md, text-shadow-lg, text-shadow-xl). Diese decken einfache Drop-Schatten ab, aber keine Neon-Stacks, keine 3D-Extrude und keine Neo-Brutalismus-Offsets. Der Generator emittiert drei Tailwind-Integrations-Patterns parallel, du pickst eins:

Pattern 1 — @utility-Block (empfohlen für Design-Token-Reuse):

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

Damit ist class="text-shadow-neon-cyan" als First-Class-Utility nutzbar, kombinierbar mit hover:, focus:, dark: und Responsive-Varianten.

Pattern 2 — Arbitrary Value (kein Theme-Edit nötig):

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

Gut für One-Offs, wo du keine wiederverwendbare Utility brauchst.

Pattern 3 — @theme-Variable (für 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); }

Praktisch, wenn die Variable in mehreren CSS-Properties wiederverwendet werden soll (z. B. text-shadow auf der Headline plus filter: drop-shadow auf einem Icon mit derselben Farb-Identität).

Was ist der Neo-Brutalismus-Preset-Pack?

Neo-Brutalismus ist der 2026er Refined-Minimalism-Konter-Trend: harte Kanten, hohe Kontraste, keine Transluzenz. Im Text-Shadow-Kontext bedeutet das: harte Offsets von 4-8 px, null Weichzeichnung, eine einzige flache Farbe pro Schatten, keine Alpha-Verläufe. Der Pack enthält vier Presets:

Brutal Schwarz: Gelber Text auf weißem Hintergrund, 6-px-schwarze Verschiebung. Wirkt wie ein Plakat-Stempel aus dem analogen Druck.

Brutal Farbe: Weißer Text auf schwarzem Hintergrund, 8-px-pinke Verschiebung. Hoher Wiedererkennungswert für Brutalismus-Marken.

Brutal Stempel: Doppel-Schatten — Layer 1 in Akzent-Farbe, Layer 2 in Schwarz versetzt. Ergibt einen Komplementär-Effekt wie übereinander gestempelt.

Brutal Sticker: Doppel-Schatten — Layer 1 in Weiß als Highlight, Layer 2 in Schwarz versetzt. Wirkt wie ein aufgeklebter Sticker mit Plastik-Outline.

Alle vier Presets sind WCAG-aware: harte Offsets sind in der Regel kontrast-sicher, weil keine Transluzenz die Farbtrennung verwässert. Das Halo-Gate flaggt sie nicht, solange Text-vs.-Hintergrund über 4.5:1 liegt — was bei den voreingestellten Farbpaaren der Fall ist.

Wie Speichert das Tool meine Konfiguration?

Gar nicht. Pure-client, kein Upload, kein Server, kein localStorage, kein Cookie, kein Tracking. Beim Schließen des Tabs verschwindet alles. Die Browser-Engine berechnet jeden Schatten lokal — auch bei großen Stacks mit acht Ebenen ist die Live-Vorschau flüssig.

Wer eine Konfiguration über mehrere Sessions sichern will, kopiert den CSS- oder Tailwind-Output ins eigene Stylesheet. Das ist der Vorteil von text-shadow als CSS-Property: die komplette Konfiguration steckt in einer einzigen Deklaration und braucht keine externe Datei.