Box-Shadow mit Multi-Layer bauen

Was macht der Box-Shadow-Generator?

Der Generator baut CSS-Schatten visuell. Pro Ebene wählst du den horizontalen und vertikalen Versatz, die Weichzeichnung, den Spread und die Schattenfarbe — inklusive eines Inset-Schalters, der zwischen Außen- und Innen-Schatten umschaltet. Bis zu zehn Ebenen lassen sich stapeln, was bei realistischen UI-Schatten Pflicht ist: eine einzelne Ebene wirkt flach, drei gestapelte Ebenen simulieren das echte Verhalten von Licht in einem Raum.

Die Live-Vorschau zeigt das Ergebnis auf einer Karte, deren Hintergrundfarbe du frei wählst — wichtig, weil dasselbe Schatten-Set auf Off-White und auf Dark-Mode-Grau völlig unterschiedlich wirkt. Die Ausgabe gibt es in vier Formaten: Plain-CSS für klassische Stylesheets, eine Tailwind-v4-Klasse mit @theme-Block zum Registrieren als Design-Token, ein Inline-Style-Attribut und einen CSS-Custom-Properties-Block, der jeden Stack als wiederverwendbaren Token exportiert.

Wie funktioniert die box-shadow-Eigenschaft?

Die CSS-box-shadow-Eigenschaft folgt einer einfachen Syntax: [inset] offset-x offset-y [blur] [spread] color. Ein klassischer Karten-Schatten sieht zum Beispiel so aus: box-shadow: 0 4px 8px -2px rgba(0,0,0,0.1). Positive Y-Werte schieben den Schatten nach unten, positive X-Werte nach rechts. Blur weichzeichnet die Kanten — bei 0 px ist der Schatten knackscharf, bei 40 px diffus wie eine Wolke.

Spread macht den Schatten größer oder kleiner als das Element. Ein negativer Spread holt den Schatten enger an den Kasten heran, was bei Modal-Lifts der Trick ist, damit der Schatten nicht „ausläuft”. Ein positiver Spread vergrößert ihn — nützlich für Glow-Effekte oder breite Heller-Highlight-Schichten in Dark-Mode-Designs.

Wie kombiniert man mehrere Box-Shadows?

Mehrere Schatten gehören in eine einzige box-shadow-Deklaration, durch Komma getrennt. Wichtig: Die Reihenfolge zählt. Der erste Eintrag rendert oben — wenn du einen scharfen Outline-Schatten haben willst, der über einer weichen Ambient-Lage liegt, gehört der Outline-Eintrag zuerst.

.card {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.08),   /* contact */
    0 4px 8px rgba(0,0,0,0.08),   /* key */
    0 12px 24px rgba(0,0,0,0.08); /* ambient */
}

Drei Ebenen reichen meistens. Realistische UI-Schatten von Material Design stapeln genau diese drei Lagen: eine kurze, dichte Contact-Schadow am unteren Rand, eine mittlere Key-Shadow als Haupt-Akzent und eine weite, weiche Ambient-Shadow, die das Streulicht des Raums simuliert. Der Auto-Rezept-Modus des Generators baut diesen Stack in einem Klick.

Was bedeutet inset und wann nutzt man es?

Der inset-Schlüsselwort vor den Werten dreht den Schatten nach innen — das Element wirkt, als wäre es in eine Oberfläche eingelassen. Inset-Schatten malt der Browser über den Hintergrund, aber unter den Inhalt. Klassische Use-Cases:

• Form-Eingabefelder. Ein leichter Inset-Schatten am oberen Rand (inset 0 1px 2px rgba(0,0,0,0.05)) signalisiert „hier kann etwas hinein”.
• Gedrückte Buttons. Ein deutlicher Inset (inset 0 2px 4px rgba(0,0,0,0.16)) ergibt den klassischen Active-State, ohne dass das Element seine Position verändert.
• Hairline-Outlines. inset 0 0 0 1px var(--color-border) ergibt eine pixelgenaue Innen-Linie, die in High-DPI-Browsern besser rendert als eine echte border — der Innenkasten wird nicht durch das box-sizing gefressen.

Im Generator schaltet ein Checkbox pro Ebene zwischen Inset und Outset. Beides lässt sich im selben Stack mischen — ein klassischer Card-Look kombiniert eine äußere Ambient-Shadow mit einer inneren Hairline.

Wie wählt man Farbe und Alpha für realistische Schatten?

Reines Schwarz mit fester Alpha (rgba(0,0,0,0.2)) wirkt in der Praxis oft härter als nötig. Drei Strategien:

1. Tönung mit dem Hintergrund. Wenn die Seite auf einem warmen Off-White (#FAFAF9) sitzt, sind warm-getönte Schatten (oklch(0.2 0.05 60 / 0.2)) natürlicher als reines Schwarz. Der Generator nimmt eine beliebige Tint-Farbe und reduziert sie auf die richtige Alpha pro Ebene.
2. Per-Ebene-Alpha statt Single-Layer-Alpha. Drei gestapelte Schatten mit 8 %, 12 % und 20 % Alpha (Comeau-Recipe) ergeben mehr Tiefe als ein einzelner Schatten mit 40 % Alpha. Die Augen interpretieren die abgestufte Lichtkurve als physikalisch korrekt.
3. OKLCH für hue-stabile Farbe. OKLCH (CSS Color Module Level 4) hält die Sättigung über alle Helligkeiten konstant. Beim Tönen eines Schattens zu einer Brand-Farbe verliert OKLCH keine Chroma im dunklen Bereich — Hex/RGBA tut das.

Der Generator emittiert pro Output-Format die Farbe in der gewählten Notation: Hex für maximale Kompatibilität, HSL für intuitive Hue-Sat-Light-Kontrolle, OKLCH für Tailwind-v4-Workflows.

Wann lohnt sich Material-Design-Elevation?

Material Design definiert 1–24 als kanonische Elevation-Stufen, jeweils mit einem präzise gestaffelten Schatten-Stack. Wer ein Material-3-Look haben will, lädt einfach Stufe 1 für Resting-Cards, Stufe 4 für FABs, Stufe 8 für Modal-Sheets und Stufe 24 für Dialog-Top-Layer. Der Generator zeigt 9 kanonische Stufen (1, 2, 3, 4, 6, 8, 12, 16, 24) als Quick-Picks.

Für Designs außerhalb des Material-Ökosystems sind die Stufen Startpunkte: lade Stufe 4, ziehe die Blur-Werte nach unten, tausche die schwarze Tönung gegen eine Brand-Hue. Der Output verändert sich live mit. So bekommst du die korrekt-gestaffelte 3-Ebenen-Struktur, ohne sie selbst rechnerisch herleiten zu müssen.

Wie schreibt man Box-Shadows als Design-Token?

Statt jeden Karten-Schatten inline zu deklarieren, registriert man ihn einmal als Custom-Property:

:root {
  --shadow-card: 0 1px 2px rgba(0,0,0,0.08), 0 4px 8px -2px rgba(0,0,0,0.08);
  --shadow-modal: 0 8px 16px -4px rgba(0,0,0,0.16), 0 20px 40px -8px rgba(0,0,0,0.12);
}

.card { box-shadow: var(--shadow-card); }
.modal { box-shadow: var(--shadow-modal); }

Tailwind v4 erlaubt seit der CSS-First-Config das gleiche Pattern direkt im @theme-Block:

@theme {
  --shadow-card: 0 1px 2px rgba(0,0,0,0.08), 0 4px 8px -2px rgba(0,0,0,0.08);
}

Dadurch wird die Utility shadow-card automatisch verfügbar — wie eine eingebaute Klasse. Der Generator gibt beide Varianten in den Output-Modi „CSS-Variablen” und „Tailwind v4” aus, jeweils mit konfigurierbarem Token-Namen.

Was kosten Box-Shadows beim Rendering?

Browser malen jeden Schatten über einen separaten Paint-Pass: erst das Element, dann jeden Schatten von hinten nach vorne. Drei Faktoren treiben die Kosten:

• Blur-Radius. Hohe Blur-Werte (> 40 px) zwingen die GPU zu großen Convolution-Operationen pro Frame. Bei statischen Karten ist das egal — bei animierten Hover-States oder Scroll-driven Lifts kostet das Frame-Time.
• Anzahl der Ebenen. Vier oder mehr Schatten in einer Deklaration verdoppeln den Paint-Aufwand pro Frame. Drei Ebenen sind das übliche Maximum für animierte UI.
• Spread-Werte. Größere Spread-Werte vergrößern die Paint-Region und damit die Gesamtanzahl der Pixel, die der Browser blurren muss.

Der Generator zeigt einen Performance-Hinweis, sobald Blur > 40 px ODER mehr als drei Ebenen stacken. Vorschlag in beiden Fällen: will-change: box-shadow während der Animation setzen und nach Abschluss wieder entfernen — das pinnt den Schatten in eine eigene Compositor-Schicht, was die Wieder-Komposition günstiger macht. Niemals permanent setzen; das frisst Speicher.

Welche Anwendungsfälle gibt es?

Resting-Cards. Ein subtiler 2-Ebenen-Schatten reicht. Beispiel: 0 1px 2px rgba(0,0,0,0.08), 0 4px 8px -2px rgba(0,0,0,0.08).

Hover-Lifts. Stack identisch, aber Y-Versatz und Blur ungefähr 2× — wirkt wie ein Anheben.

Modal-Sheets. Großer Y-Versatz, hoher Blur, negativer Spread für eine fokussierte Form. Plus eine Outline-Lage für High-Contrast-Mode.

Eingelassene Form-Felder. Single Inset-Layer am oberen Rand für den „hier reinklicken”-Vibe.

Glow-States. Spread > 0 mit niedriger Alpha und Brand-Hue — etwa für Focus-Rings bei dunklen Hintergründen.

Soft-UI-Akzente. Doppelter Schatten mit einem hellen Highlight (oben links) und einem dunklen Shadow (unten rechts) — der Generator hat dafür einen Preset.

Häufige Fragen

Wie funktioniert die CSS-Eigenschaft box-shadow?

Die Eigenschaft erzeugt Schatten um einen Element-Kasten. Du gibst horizontalen und vertikalen Versatz an, optional Weichzeichnung und Spread, dann die Farbe. Mehrere Schatten werden durch Komma getrennt — der erste Eintrag liegt vorne, weitere stapeln dahinter.

Wie kombiniert man mehrere Box-Shadows?

Mehrere Schatten gehören in eine box-shadow-Deklaration, getrennt durch Komma. Reihenfolge zählt: der erste Eintrag rendert oben. Im Generator stapelst du bis zu zehn Ebenen — die Vorschau zeigt das Ergebnis sofort, die Ausgabe enthält alle Ebenen in CSS-Reihenfolge.

Was bedeutet inset bei einer Box-Shadow?

Mit dem Schlüsselwort inset zeichnet der Browser den Schatten nach innen statt nach außen — das Element sieht aus, als wäre es in die Oberfläche eingelassen. Inset-Schatten liegen über dem Hintergrund, aber unter dem Inhalt. Im Generator schaltet ein Toggle pro Ebene zwischen Inset und Outset.

Welcher Blur-Wert ist gut für Karten?

Subtile Karten brauchen 4–8 px Blur, dezente Hover-States 12–24 px, Modal-Lifts 24–40 px. Höhere Werte wirken weicher, kosten aber Paint-Zeit auf Mobilgeräten. Der Generator warnt bei Blur über 40 px und schlägt will-change: box-shadow für Animationen vor.

Wie nutze ich Box-Shadows in Tailwind v4?

Tailwind v4 erlaubt arbitrary shadow-[…]-Klassen für beliebige Shadow-Werte. Eleganter: Registriere den Stack via @theme { --shadow-app: …; } in deinem CSS und nutze die Klasse shadow-app wie eine eingebaute Utility. Der Generator gibt beide Varianten direkt aus.

Was ist eine Auto-Layered-Shadow?

Drei Ebenen gestapelt — eine kurze Contact-Shadow am Rand, eine mittlere Key-Shadow als Hauptakzent, eine lange weiche Ambient-Shadow für die Tiefe — ergeben deutlich realistischere Schatten als eine einzelne Ebene. Der Auto-Rezept-Modus generiert den 3-Ebenen-Stack aus Elevation-Stufe, Licht-Richtung und Farb-Tönung.

Funktioniert OKLCH in Box-Shadow-Farben?

Ja. Browser, die OKLCH unterstützen (Chrome 111+, Firefox 113+, Safari 16.4+), rendern oklch(0.6 0.18 30 / 0.2) als Schattenfarbe genauso wie jeden Hex-Wert. OKLCH hält Sättigung konstant beim Tönen — der Generator schaltet zwischen Hex/HSL/OKLCH-Output ohne Verlust um.

Speichert das Tool meine Shadow-Sets?

Nein. Alle Eingaben bleiben im Browser-Tab, nichts wird gespeichert oder hochgeladen. Beim Neuladen ist das Tool leer. Wer Sets sichern will, kopiert die CSS-Variablen-Ausgabe in das eigene Stylesheet oder die tokens.css.

Welche CSS-Tools sind verwandt?

Weitere Tools für CSS-Authoring und Farbpflege:

• CSS-Gradient-Generator — Verläufe in OKLCH/Tailwind v4 bauen.
• Hex zu RGB Konverter — Hex-Codes in RGB, HSL und OKLCH umwandeln.
• Kontrast-Prüfer — WCAG-AAA-Kontrast zwischen zwei Farben prüfen.
• CSS-Formatter — Rohes oder minifiziertes CSS sauber formatieren.