CSS Box-Shadow-Generator Online
CSS-Box-Schatten mit Live-Vorschau erstellen. Mehrere Ebenen, Inset, Blur und Spread.
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.2);
Warum dieses Tool nutzen
Perfekte CSS-Schatten ohne Rätselraten
Sofortige Vorschau
Passe Versatz, Unschärfe, Ausbreitung und Farbe mit Schiebereglern an. Ergebnisse sind sofort sichtbar.
Mehrere Ebenen
Stapele Schatten für realistische Effekte. Ebenen einfach hinzufügen oder entfernen.
Inset-Schatten
Mit einem Klick zwischen äußerem und innerem Schatten wechseln.
Keine Installation
Alles im Browser. Keine externen Design-Tools erforderlich.
So funktioniert es
Drei Schritte, kein Aufwand
Schatten konfigurieren
Passe Versatz X, Versatz Y, Unschärferadius, Ausbreitungsradius und Farbe über visuelle Steuerelemente an. Aktiviere Inset für innere Schatten.
Mehrere Schatten hinzufügen
Die box-shadow-Eigenschaft akzeptiert mehrere durch Kommas getrennte Schatten. Kombiniere Ebenen, um realistische Erhebungs- oder Tiefeneffekte zu erzielen.
CSS kopieren
Der box-shadow-Code wird in Echtzeit generiert. Kopiere die vollständige Eigenschaft für dein Stylesheet.
FAQ
Noch Fragen?
Ja. Die box-shadow-Eigenschaft akzeptiert eine durch Kommas getrennte Liste: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24). Schatten werden in der Reihenfolge gerendert – der erste in der Liste erscheint oben. Das ist entscheidend für realistische mehrschichtige Schatten, die dem Prinzip folgen, dass natürliche Schatten eine Kernschatten-Komponente (dunkel und scharf) und eine Halbschatten-Komponente (diffus und weit) haben.
Das Schlüsselwort inset ändert den Schatten von außen nach innen. Statt nach außen vom Element zu projizieren, erscheint der Schatten innerhalb seiner Grenzen und erzeugt die Illusion, dass das Element versenkt oder gedrückt ist. Es wird verwendet, um gedrückte Schaltflächen, aktive Eingabefelder und invertierte Relief-Effekte (wie im Neumorphismus-Design) zu simulieren.
Box-Schatten werden in der Paint-Phase des Browsers gerendert und können aufwendige Neuzeichnungen auslösen, wenn sie animiert werden. Anders als transform und opacity (die in der Compositor-Ebene ohne Neuzeichnung arbeiten) kann das Animieren von box-shadow Bildrate-Einbrüche verursachen. Das Chrome-Team empfiehlt stattdessen filter: drop-shadow() für Elemente, die animierte Schatten benötigen, oder Pseudo-Elemente mit animierter Deckkraft, um den Effekt mit besserer Performance zu simulieren.
text-shadow gilt nur für den gerenderten Text und folgt den Konturen jedes Zeichens. box-shadow gilt für das Box-Modell des Elements (border-box) und ignoriert den Inhalt vollständig. Das Anwenden von box-shadow auf ein Text-Span erzeugt einen rechteckigen Schatten (oder abgerundeten, wenn das Element border-radius hat). Für einen Schatten, der der genauen Form des Inhalts folgt (einschließlich transparentem Text oder Bildern), verwende filter: drop-shadow().
Realistische Schatten kombinieren mindestens zwei Ebenen: einen hoch-deckkräftigen, kleinen Unschärfe-Schatten für den Kernschatten und einen niedrig-deckkräftigen, großen Unschärfe-Schatten für den Halbschatten. Googles Material-Design-Elevationssystem definiert 24 Elevationsstufen, jede mit spezifischen box-shadow-Werten. Elevation 8 (schwebende Karten) verwendet beispielsweise: box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12).
CSS box-shadow: Rendering, Neumorphismus und Material-Design-Elevation
Die box-shadow-Eigenschaft wurde in CSS3 (Backgrounds-and-Borders-Modul, W3C) eingeführt und erreichte 2012 vollständige, nicht-präfixierte Unterstützung. Vor CSS3 simulierten Entwicklerinnen und Entwickler Schatten mit 9-slice-PNG-Bildern (Nine-Patch), einer bandbreiten- und wartungsintensiven Technik. Die box-shadow-Syntax definiert in dieser Reihenfolge: offset-x, offset-y, blur-radius, spread-radius und Farbe, mit dem optionalen Schlüsselwort inset. Der Spread-Parameter ist einzigartig für box-shadow und hat kein Äquivalent in filter: drop-shadow() oder text-shadow.
Das Schatten-Rendering in modernen Browsern verwendet Compositor-Ebenen. Wenn ein Element box-shadow hat, befördert der Browser es auf seine eigene Paint-Ebene, um den Schatten unabhängig zu rendern. Das hat GPU-Speicher-Implikationen: Jede zusätzliche Ebene verbraucht VRAM. Auf Geräten mit begrenztem VRAM (einfache Mobilgeräte) können übermäßige box-shadows Bildrate-Einbrüche verursachen. Die Alternative filter: drop-shadow() verwendet die CSS-Filter-Pipeline, die in Chrome durch die GPU effizienter verarbeitet wird, obwohl sich ihr Verhalten bei Elementen mit border-radius unterscheidet.
Neumorphismus, der UI-Design-Trend, der im Dezember 2019 nach einem Dribbble-Beitrag von Alexander Plyuto viral ging, basiert ausschließlich auf box-shadows, um die Illusion von aus dem Hintergrund extrudierten Elementen zu erzeugen. Das typische Rezept kombiniert zwei Schatten: einen hellen (positiver Versatz, als käme das Licht von oben links) und einen dunklen (negativer Versatz). Googles Material-Design-Elevationssystem, dokumentiert unter material.io, definiert 24 Elevationsstufen mit mathematisch berechneten box-shadow-Werten, um in der gesamten Benutzeroberfläche konsistent Umgebungs- und Direktlicht zu simulieren.