CSS-Shadow-Workshop mit 3 Properties in einem UI

Was macht der CSS-Shadow-Generator?

Der Generator ist eine Werkbank für die drei CSS-Schatten-Properties box-shadow, text-shadow und filter: drop-shadow() in einem UI. Pro Property zeigt eine Live-Vorschau das Ergebnis auf einem passenden Demo-Element: eine 280×160-Karte für box-shadow, eine große „Aa”-Glyphe für text-shadow und ein SVG-Logo mit Transparenz für drop-shadow. Du kannst zwischen hellem und dunklem Hintergrund umschalten, die Element-Farbe pro Theme setzen und die Werte über numerische Inputs oder Slider feinjustieren.

Bis zu sechs Ebenen lassen sich stapeln. Pro Ebene werden X- und Y-Versatz, Weichzeichnung sowie — nur bei box-shadow — Spread und Inset gesetzt. Die Farbe binde an einen Color-Picker plus Hex-Textfeld, sodass auch 8-stellige Hex-Werte mit Alpha akzeptiert werden. Ein Tap auf eine Voreinstellung lädt einen kuratierten Stack: Flache Karte, Neumorphismus (hell/dunkel), Glasmorphismus (Card und Sidebar), Long-Hard-Shadow 45°, Inner-Shadow-Pressed, Text-Gravur, Text-Glühen, Drop-Shadow-SVG-Default und Drop-Shadow-Logo-Heavy.

Der Output kommt in drei Formaten: Plain CSS mit box-shadow: / text-shadow: / filter:-Deklaration, Tailwind-v4-@theme-Block für class="shadow-{name}" oder class="text-shadow-{name}" (via @utility-Direktive, weil Tailwind v4 keine eingebaute Text-Shadow-Utility hat), und eine CSS-Variablen-Variante mit einer Variable pro Ebene plus einem kombinierten Token für box-shadow: var(--shadow-{name}).

Was sind die drei Use-Cases?

box-shadow ist die klassische Wahl für rechteckige Elemente: Karten, Buttons, Modale, Tabs. Die Eigenschaft erlaubt Spread und Inset, was sie flexibler macht als die anderen beiden Properties. Der Schatten wird entlang des Bounding-Box-Rechtecks gezeichnet — auch wenn das Element abgerundete Ecken hat, folgt der Schatten der border-radius-Form.

text-shadow zeichnet einen Schatten nur hinter den Glyphen, nicht hinter dem ganzen Element. Keine Spread, kein Inset (CSS-Spec). Typische Use-Cases: Lese-Halos auf Bildhintergründen (weißer Text + schwarzer 1-px-Halo = lesbar auf jedem Foto), Gravur-Effekte (1 px nach unten hell + 1 px nach oben dunkel) oder dezente Neon-Glühen für Marketing-Headings.

filter: drop-shadow() läuft als CSS-Filter und ist die einzige Variante, die die Alpha-Maske respektiert. Ein SVG-Logo mit Transparenz erhält einen Schatten entlang der echten Form. Ein PNG mit freigestelltem Hintergrund auch. Der Trade-Off: Filter sind GPU-teurer als box-shadow, und mehrere drop-shadow()-Aufrufe werden als Filter-Chain space-separiert geschrieben — nicht komma-separiert wie bei box-shadow.

Wie liest das Lesbarkeits-Gate WCAG 2.2?

Sobald text-shadow oder drop-shadow auf Text wirkt, prüft das Gate zwei Achsen.

Achse 1 — Text gegen Hintergrund: WCAG 2.2 Erfolgskriterium 1.4.3 verlangt 4.5:1 für Fließtext und 3:1 für Large-Text (≥ 18 pt oder 14 pt bold). Liegt der Wert unter 3:1, fällt das Gate auf voll-rot — kein Halo kann das retten, Text- oder Hintergrund-Farbe muss geändert werden. Liegt der Wert zwischen 3 und 4.5, ist der Stack nur als Large-Text akzeptabel.

Achse 2 — Schatten gegen Hintergrund: WCAG 2.2 Erfolgskriterium 1.4.11 „Non-text Contrast” verlangt 3:1 für strukturelle Grafik-Komponenten. Liegt der Schatten unter 3:1, ist der Halo dekorativ statt strukturell — wenn der Schatten die Text-Lesbarkeit tragen soll (typisch bei weißem Text auf hellem Bild), fehlt ihm der Kontrast für diese Rolle. Das Gate zeigt einen orange umrahmten Warn-Hinweis.

Der Generator rechnet beide Achsen live, sobald sich Text-, Schatten- oder Hintergrund-Farbe ändert. Der Schwellenwert-Logik folgt dem W3C-Algorithmus und gibt einen rohen Wert (z. B. 7.21:1) plus eine kategorische Severity (ok / warn-shadow / warn-text / fail) zurück. Kein anderes Schatten-Tool im Vergleichs-Set liefert das Gate inline.

Was bedeutet light-dark() als Dark-Mode-Output?

light-dark() ist eine CSS-Color-Module-4-Funktion, die einen Wert je nach aktuellem color-scheme wählt. Statt zwei separater CSS-Regeln mit @media (prefers-color-scheme: dark) schreibst du:

.card {
  box-shadow: 0 4px 8px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.56));
}

Die Funktion gehört zum Baseline-2024-Set und ist in Chrome 123, Edge 123, Firefox 120 und Safari 17.5 verfügbar. Widely-Available-Status (≥ 30 Monate breite Abdeckung) wird Ende 2026 erwartet — bis dahin schreibt der Generator automatisch einen @supports-Fallback dazu, der ältere Browser auf zwei separate Regeln mit prefers-color-scheme-Switch routet.

Der Toggle im Generator ist ein einzelner Schalter. Schaltest du ihn an, emittiert der Output-Block beide Varianten — modern und Fallback — in derselben Code-Box. Du kopierst alles und kannst sofort produktiv damit arbeiten. Im Dunkelmodus sind Schatten typischerweise drei- bis vierfach stärker (höhere Alpha), weil die Hintergrundfarbe näher am Schatten liegt und die feinen Layer sonst untergehen.

Welche Surface-Rezepte gibt es?

Drei vorgefertigte Recipe-Typen lassen sich pro Box-Shadow-Stack laden.

Neumorphismus ist eine Design-Sprache mit zwei Schatten pro Element. Ein heller Schatten fällt zur Lichtquelle hin, ein dunkler Schatten fällt von der Lichtquelle weg. Das Element wirkt, als wäre es aus der Oberfläche herausgepresst. Der Generator bietet acht Lichtquellen-Positionen (oben links, oben, oben rechts, rechts, unten rechts, unten, unten links, links) und einen Tiefen-Slider (2–40 px). Achtung: Neumorphismus hat inhärent niedrige Kontraste — das Lesbarkeits-Gate warnt aktiv, wenn die Schatten unter 3:1 gegen die Surface liegen.

Glasmorphismus kombiniert backdrop-filter: blur() saturate() mit einem halbtransparenten Hintergrund. Der Effekt: durchscheinendes Frosted-Glass auf einem bunten Hintergrund. Der Generator emittiert die backdrop-filter-Kette plus eine Companion-box-shadow für die Glas-Kante. Browser-Support: backdrop-filter ist seit Safari 18 (2024) unprefixed verfügbar, davor brauchte Safari den -webkit-backdrop-filter-Präfix. Performance: backdrop-filter triggert pro Frame einen GPU-Upload — bei vielen Elementen mit Glas-Effekt kann die Frame-Rate auf Low-End-Mobilgeräten einbrechen.

Long-Hard-Shadow ist der harte 45°-Schatten-Stack — sechs Ebenen mit zunehmendem Offset und fallender Alpha, kein Blur. Ergibt einen flachen, gestaffelten Schatten wie auf alten Plakaten oder bei Material-Design-Long-Shadows. Stark mit kräftiger Brand-Farbe als Schatten (statt schwarz), weil die harte Kante die Farbe deutlich zeigt.

Was sind farb-koordinierte Schatten?

Standard-Schatten sind oft rgba(0, 0, 0, 0.x) — eine graue Wolke unter dem Element. Das Anti-Pattern: bei farbigen Elementen wirkt der schwarze Schatten wie aus einer anderen Welt. Die farb-koordinierte Engine leitet den Schatten aus der Element-Farbe ab — gleiche Hue, niedrigere Lightness (in OKLCH: L − 0.4), reduzierte Chroma (C × 0.6). Ein roter Button bekommt einen dunkel-rötlichen Schatten, ein blauer Button einen dunkel-blauen, ein grüner einen dunkel-grünen.

OKLCH ist die perceptually uniforme Color-Space, in der gleiche numerische Distanzen visuell gleich groß wirken. Die −0.4-Lightness-Verschiebung wird auf [0.02, 0.95] geklemmt, damit auch reine Schwarz- oder Weiß-Elemente noch einen sichtbaren Schatten haben. Die 0.6-Chroma-Reduktion verhindert, dass der Schatten genauso saturiert wie das Element wird — sonst sähe der Schatten wie eine zweite Layer aus statt wie ein Schatten.

Der Generator wendet die Engine auf Ebene 1 an, sobald du auf „Auf Ebene 1 anwenden” klickst. Die Alpha bleibt initial bei 30 % — du kannst sie pro Ebene anpassen.

Was emittiert der Tailwind-v4-Output?

Tailwind v4 hat eine CSS-First-Konfiguration mit dem @theme-Block. Für box-shadow registriert der Generator eine --shadow-{name}-Variable und gibt sowohl die arbitrary-value-Klasse (class="shadow-[…]") als auch die token-basierte Klasse (class="shadow-{name}") aus.

Für text-shadow hat Tailwind v4 keine eingebaute Utility. Der Generator nutzt die @utility-Direktive, die in Tailwind v4 hinzugekommen ist:

@utility text-shadow-heading {
  text-shadow: 0px 1px 0px #FFFFFFCC, 0px -1px 1px #00000080;
}

Damit wird class="text-shadow-heading" als first-class-Utility nutzbar. Für drop-shadow registriert Tailwind v4 wieder einen --drop-shadow-{name}-Token; die Klasse heißt class="drop-shadow-{name}" und applied das filter-Property automatisch.

Wie funktionieren Permalink und Privacy?

Der Permalink-Button kodiert die aktuelle Konfiguration als JSON-Fragment in die URL. Beispiel: …/css-shadow-generator#config={"p":"box-shadow",…}. Browser laden Fragments lokal — der Server sieht den #-Teil nie. Du kannst den Link als Lesezeichen setzen, in einem Doc teilen oder per Slack schicken. Beim Öffnen rekonstruiert der Generator den Stack 1:1.

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 sechs Ebenen ist die Live-Vorschau auf jedem Gerät jünger als fünf Jahre flüssig.