CSS-Box-Shadow-Generator

Was macht box-shadow eigentlich?

box-shadow zeichnet einen Schatten um (oder, mit inset, innerhalb) der Border-Box eines Elements. Jede Ebene besteht aus bis zu sechs Werten: einem optionalen inset-Schlüsselwort, X- und Y-Versatz, Weichzeichnungsradius, Ausbreitungsradius und einer Farbe. Mehrere kommagetrennte Ebenen stapeln sich in der Reihenfolge des Quellcodes, wobei die erste Ebene oben gezeichnet wird. Diese Stapelung verleiht modernen UI-Schatten ihre Tiefe: eine enge, dunkle Ebene für den Kontakt, eine weiche, breite Ebene für Umgebungslicht, manchmal ein zarter farbiger Glow obendrauf. Dieser Generator bietet dir eine live geschachtelt-transparente Bühne, sodass du genau siehst, wie der Schatten fällt – auch subtile Effekte, die auf einem flachen Hintergrund verschwinden würden. Du kannst jeden Wert mit dem Slider ziehen, um schnell zu justieren, eine exakte Pixelzahl eintippen, wenn ein Designer dir Vorgaben gibt, und Ebenen umsortieren, wenn die Reihenfolge des Malers wichtig ist. Die Ausgabe umfasst sowohl rohes CSS als auch Tailwinds Arbitrary-Value-Syntax (shadow-[...]), und der aktuelle Schatten-Stack wird im URL-Hash kodiert, sodass ein teilbarer Link auf der anderen Seite den exakt gleichen Schatten rekonstruiert. Es gibt keinen Server-Roundtrip – alles wird beim Ändern der Eingaben clientseitig gerendert.

So funktioniert es

1. Mit einem Preset starten

Die Preset-Reihe bietet dir sechs gängige Ausgangspunkte. Dezent und Weich eignen sich gut für Cards; Scharf ist der flache 8-Bit-Look; Neumorph braucht einen farbigen Hintergrund, um zu wirken; Glow funktioniert auf dunklem UI; Tief ist für Modals.

2. Werte feinjustieren

Jede Ebene hat X-/Y-Versatz, Weichzeichnung, Ausbreitung, Farbe und Deckkraft sowie einen Inset-Schalter. Zieh die Slider für Live-Feedback oder gib exakte Zahlen in das Feld neben jedem Slider ein.

3. Stapeln und umsortieren

Klick auf Ebene hinzufügen, um weitere Schatten zu stapeln. Jede neue Ebene wird mit neutralen Standardwerten hinzugefügt. Verwende die Hoch-/Runter-Pfeile zum Umsortieren – die erste Ebene wird zuletzt gezeichnet (über den anderen).

4. Ausgabe kopieren

Kopiere das CSS direkt in dein Stylesheet oder schnapp dir die Tailwind-Arbitrary-Value-Klasse für inline use. Share-URL kopieren liefert dir einen Link, der den exakten Stack rekonstruiert – praktisch, um eine:n Designer:in zu pingen.

Aufschlüsselung der CSS-box-shadow-Syntax

Die vollständige Syntax lautet box-shadow: [inset] <x-offset> <y-offset> <blur-radius> <spread-radius> <color>. X-/Y-Versatz verschieben den Schatten horizontal und vertikal. Positives Y schiebt den Schatten nach unten (Konvention für Licht von oben). Weichzeichnungsradius macht die Kanten weicher; 0 ist ein harter Schatten. Ausbreitungsradius vergrößert oder verkleinert den Schatten, bevor die Weichzeichnung angewendet wird – positive Werte machen ihn größer, negative ziehen ihn enger zusammen, sodass er an den Rändern hervorlugt, statt zu wölben. Farbe akzeptiert jede CSS-Farbe, aber rgba() mit niedrigem Alpha sieht meist besser aus als ein voll deckendes Dunkel – reale Schatten sind partielle Verdeckungen, keine Farbe. Das optionale inset-Schlüsselwort zeichnet innerhalb der Box, nützlich für Drücke-Knopf-Effekte. Mehrere durch Kommas getrennte Schatten stapeln sich von vorne nach hinten: Der erste gewinnt dort, wo sie sich überlappen.

Werte wählen, die richtig aussehen

Cards / Panels: Y-Versatz von 4–12 px, Weichzeichnung 12–28 px, Ausbreitung -2 bis -8, Alpha 0,08–0,20. Zwei Ebenen (eine eng, eine weit) schlagen meist eine starke Ebene. Buttons: Y von 1–2 px, Weichzeichnung 2–4 px, sehr niedriges Alpha – denk an einen Kontaktschatten. Modals: Y von 20–40 px, Weichzeichnung 40–80 px, negative Ausbreitung, Alpha 0,25–0,45. Glow: X und Y von 0, Weichzeichnung 20–60 px, Farbe ist der Markenakzent bei 30–60 % Alpha. Inset: kleine Versätze (1–2 px) und winzige Weichzeichnung für gedrückte Steuerelemente. Vermeide: reines Schwarz bei voller Deckkraft – es zerquetscht alles darunter. Verwende den dunkler gemischten Seitenhintergrundton für Schatten, die sich angedockt anfühlen.

Häufig gestellte Fragen

Warum sind mehrschichtige Schatten besser als ein großer?

Echte Schatten haben zwei Teile: eine harte, dunkle Kante nahe dem Kontaktpunkt (Umbra) und einen weichen, abklingenden Halo (Penumbra). Das Stapeln einer engen Ebene mit geringer Weichzeichnung mit einer breiteren, weicheren Ebene ahmt das physisch nach und wirkt geerdeter. Ein einzelner starker Schatten sieht aus wie ein Aufkleber.

Was macht spread eigentlich?

Spread vergrößert (positiv) oder verkleinert (negativ) das Schattenrechteck, bevor die Weichzeichnung angewendet wird. Negativer Spread ist ideal für Cards: Er zieht den Schatten nach innen, sodass er nicht über die Ecken hinauswölbt – das ergibt einen engeren, kontrollierteren Look.

Wofür ist inset gut?

inset zeichnet den Schatten innerhalb des Elements statt außen herum. Es ist die Standardmethode, um gedrückte Buttons, Well-style-Inputs und versenkte Cards zu faken. Kombiniere einen schwachen Inset-Schatten mit einem schwachen Outset-Schatten für einen polierten „versenkten"-Effekt.

Funktioniert die Share-URL für andere?

Ja. Der aktuelle Schatten-Stack wird im URL-Hash kodiert (#shadow=...). Wer den Link öffnet, sieht den exakt gleichen Ebenen-Stack, da die Kodierung deterministisch ist und vollständig clientseitig läuft.

Warum verwendet die Tailwind-Klasse Unterstriche?

Tailwinds Arbitrary-Value-Syntax erlaubt keine Leerzeichen in den Klammern. Konvention ist, Leerzeichen durch Unterstriche zu ersetzen (shadow-[0_4px_12px_rgba(0,0,0,0.1)]). Tailwind liest die Unterstriche zur Compile-Zeit als Leerzeichen.

Gibt es Performance-Kosten?

Box-Schatten werden GPU-gerastert und sind auf einer statischen Ebene günstig, aber das Animieren von box-shadow direkt erzwingt einen Repaint. Wenn du einen animierten Schatten brauchst, blende stattdessen ein separates, geschichtetes Element mit statischem Schatten ein – das animiert als kompositierte transform/opacity und bleibt flüssig.

CSS-Box-Shadow-Generator