CSS Box Shadow: Vollstaendiger Leitfaden mit Beispielen
Meistere die box-shadow-Syntax, mehrschichtige Schatten, innere Schatten und Elevation-Systeme fuer modernes UI-Design.
Box-Schatten sind eine der vielseitigsten CSS-Eigenschaften. Ein gut gestalteter Schatten kann jedes Element geerdet, erhoben oder interaktiv erscheinen lassen.
Die box-shadow-Syntax ist taeusichend einfach, aber die Designmoeglichkeiten sind gross. Das Ueberlagern mehrerer Schatten schafft realistischere Tiefe.
box-shadow Syntax
Die vollstaendige box-shadow-Syntax lautet: box-shadow: offset-x offset-y blur-radius spread-radius color. Alle Werte ausser offset-x und offset-y sind optional. Mehrere Schatten werden durch Komma getrennt.
Kostenloses Tool Box Shadow Generator Erstelle komplexe CSS Box Shadows mit Live-VorschauOffset X/Y, Blur, Spread, Farbe
Offset-X ist der horizontale Abstand. Offset-Y ist der vertikale Abstand. Blur-radius steuert die Weichheit. Spread-radius dehnt oder zieht den Schatten zusammen.
Mehrfache Schatten und Layering
Das Ueberlagern mehrerer box-shadow-Werte erzeugt realistischere Tiefeneffekte. Eine gaengige Technik: kleinen scharfen Umgebungsschatten mit grossem weichem Hauptschatten kombinieren.
Kostenloses Tool CSS Filter Generator Wende Unschärfe, Helligkeit, Kontrast und mehr mit CSS-Filtern anInnere Schatten
Das Schluesselwort inset kehrt die Schattenrichtung um. Innere Schatten werden verwendet fuer: gedrueckte Schaltflaechen, innere Abschraeigungen, Eingabefokusringe.
Elevation Design-Systeme
Material Design 3 definiert Elevationsstufen von 0 bis 5 mit box-shadow-Werten. Jede Stufe entspricht einem Anwendungsfall: 0 fuer flache Flaechen, 1 fuer Karten, 2 fuer Schaltflaechen.
Neumorphism-Technik
Neumorphism verwendet zwei box-shadows auf demselben Element: einen hellen Schatten oben links und einen dunklen unten rechts. Das Element scheint aus dem Hintergrund herauszuragen.
Kostenloses Tool Glassmorphism Generator Erstelle mattglas UI-Effekte mit CSS backdrop-filter