CSS Box Shadow: Kompletter Leitfaden mit Beispielen

Was ist Box Shadow?

Die CSS-Eigenschaft box-shadow fuegt Schatteneffekte um den Rahmen eines Elements hinzu. Sie gehoert zu den am haeufigsten verwendeten visuellen Effekten im Web und erscheint in Karten-Layouts, Buttons, Modals und Navigationsleisten auf Millionen von Websites.

Eine einzelne box-shadow-Deklaration kann ein flaches Design in etwas verwandeln, das sich geschichtet und greifbar anfuehlt. Schatten erzeugen Tiefe, lenken den Blick des Benutzers und etablieren visuelle Hierarchie, ohne zusaetzliches Markup hinzuzufuegen.

Die Eigenschaft wird seit 2011 von jedem grossen Browser unterstuetzt — keine Vendor-Praefixe noetig. Sie funktioniert bei jedem Block-Level- oder Inline-Block-Element und laesst sich mit border-radius fuer abgerundete Schatteneffekte kombinieren.

Syntax im Detail

Die vollstaendige Syntax fuer box-shadow lautet:

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] farbe;

• offset-x: Horizontaler Abstand. Positive Werte verschieben den Schatten nach rechts, negative nach links.
• offset-y: Vertikaler Abstand. Positive Werte verschieben den Schatten nach unten, negative nach oben.
• blur-radius: Optional. Je groesser der Wert, desto weicher und ausgebreiteter der Schatten. Standard ist 0 (scharfe Kante).
• spread-radius: Optional. Positive Werte vergroessern den Schatten, negative verkleinern ihn. Standard ist 0.
• farbe: Jede gueltige CSS-Farbe. rgba() oder hsla() mit Transparenz ist der gaengigste Ansatz fuer natuerlich wirkende Schatten.
• inset: Optionales Schluesselwort, das den Schatten innerhalb des Elements statt ausserhalb erscheinen laesst.

Beispiel: box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.15); erzeugt einen dezenten Schatten, 4px nach rechts und 6px nach unten versetzt, mit einem 12px-Weichzeichner.

Gaengige Schatten-Muster

Material Design Elevation

Googles Material Design verwendet geschichtete Schatten, um Elevationsstufen anzuzeigen. Eine Karte auf Stufe 1 hat einen weichen, nahen Schatten, waehrend ein Modal auf Stufe 5 einen groesseren, diffusen Schatten besitzt:

/* Elevation 1 */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

/* Elevation 3 */
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

Dezenter Kartenschatten

Das beliebteste Muster fuer Inhaltskarten: ein kaum sichtbarer Schatten, der die Karte vom Hintergrund abhebt.

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

Button-Drueck-Effekt

Kombinieren Sie box-shadow mit :active, um einen physischen Tastendruck zu simulieren:

.btn { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.btn:active { box-shadow: 0 1px 2px rgba(0,0,0,0.1); transform: translateY(2px); }

Neumorphismus

Der neumorphe Stil verwendet zwei Schatten — einen hellen und einen dunklen — um ein weiches, erhabenes Aussehen zu erzeugen:

box-shadow: 8px 8px 16px #d1d1d1, -8px -8px 16px #ffffff;

Mehrere Schatten

Sie koennen mehrere Schatten durch Kommas getrennt stapeln. Der erste aufgelistete Schatten wird zuoberst gerendert. Geschichtete Schatten sehen deutlich realistischer aus als ein einzelner Schatten, weil reales Licht sowohl weiche Umgebungsschatten als auch schaerfere Direktschatten erzeugt.

box-shadow:
0 1px 1px rgba(0,0,0,0.08),
0 2px 2px rgba(0,0,0,0.06),
0 4px 4px rgba(0,0,0,0.04),
0 8px 8px rgba(0,0,0,0.02);

Dieser geschichtete Ansatz verteilt den Schatten ueber mehrere Distanzen. Das Ergebnis ist ein sanfter, organischer Schatten, der dem Verhalten realer Schatten viel naeher kommt.

Inset-Schatten

Das Hinzufuegen des inset-Schluesselworts kehrt den Schatten ins Innere des Elements um. Dies wird haeufig fuer Eingabefelder, gedrueckte Buttons und vertiefte Container verwendet.

input:focus { box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }

Inset-Schatten erzeugen die Illusion, dass das Element in die Seite eingelassen ist. Eine beliebte Technik fuer Textfelder kombiniert einen dezenten Inset-Schatten mit einem farbigen Umriss beim Fokus:

input:focus {
box-shadow: inset 0 1px 3px rgba(0,0,0,0.08), 0 0 0 3px rgba(59,130,246,0.3);
outline: none;
}

Performance-Tipps

Box-Schatten werden vom Compositor des Browsers gerendert, und grosse oder zahlreiche Schatten koennen die Renderleistung beeintraechtigen, besonders bei Animationen.

• Box-shadow nicht direkt animieren. Aenderungen an box-shadow loesen bei jedem Frame ein Repaint aus. Verwenden Sie stattdessen ein Pseudo-Element mit dem Zielschatten und animieren Sie dessen Opazitaet.
• Blur-Radius vernuenftig halten. Ein Blur von 100px erzeugt einen riesigen Weichzeichnerbereich. Werte unter 30px sind in der Regel unproblematisch.
• will-change sparsam einsetzen. will-change: box-shadow foerdert das Element auf eine eigene Compositor-Ebene, was Animationen hilft, aber den Speicherverbrauch erhoeht.
• drop-shadow fuer unregelmaessige Formen. Fuer nicht-rechteckige Elemente folgt filter: drop-shadow() dem Alpha-Kanal, waehrend box-shadow immer die Bounding Box umschliesst.

Generieren Sie produktionsfertiges Schatten-CSS sofort mit unserem Box Shadow Generator. Passen Sie Offsets, Blur, Spread und Farbe visuell an und kopieren Sie den Code.