box-shadow

Zuletzt aktualisiert am 15. Februar 2026

box-shadow fügt einem Element einen oder mehrere Schatten hinzu, außen oder innen. Schatten erzeugen Tiefe, heben Elemente visuell hervor und machen Interfaces lebendiger. Du kannst Offset, Weichzeichnung, Ausbreitung und Farbe kontrollieren. Mehrere Schatten lassen sich durch Kommas trennen und stapeln. In Kombination mit Transitions werden Schatten zu kraftvollen Hover-Feedback-Elementen: Eine Card, die sich beim Hover anhebt und einen tieferen Schatten wirft, fühlt sich sofort interaktiv an.

Grundlagen

Ein box-shadow besteht aus bis zu sechs Teilen: dem optionalen inset-Keyword, zwei Offset-Werten (X und Y), einem optionalen Blur-Radius, einem optionalen Spread-Radius und der Farbe. Der Schatten folgt der Form des Elements und wird beeinflusst von border-radius: Ein Element mit runden Ecken bekommt einen Schatten mit runden Ecken.

Schatten liegen hinter dem Element (oder innen bei inset) und außerhalb des Layout-Flusses. Sie nehmen keinen Platz ein und verschieben keine Nachbar-Elemente. Das macht sie ideal für Hover-Effekte: du kannst den Schatten per Transition vergrößern, ohne dass sich das Layout ändert.

Mehrere Schatten werden durch Kommas getrennt und von oben nach unten gerendert: Der erste Schatten liegt über allen anderen. Das nutzt man oft für realistische Material-Design-Schatten, die aus mehreren Schichten bestehen.

Syntax & Werte

Beispiele

Schatten-Variationen

Verschiedene Schatten-Stile im direkten Vergleich: von hart und klein bis weich und groß.

.hart    { box-shadow: 2px 2px 0 #1e293b; }
.klein   { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.mittel  { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.gross   { box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.multi   {
  box-shadow:
    0 1px 3px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.24);
}

<div class="shadow-demo">
<div class="shadow-box s1">Hart</div>
<div class="shadow-box s2">Klein weich</div>
<div class="shadow-box s3">Mittel</div>
<div class="shadow-box s4">Groß</div>
<div class="shadow-box s5">Mehrschichtig</div>
</div>

Material Design Elevation

Material Design nutzt mehrschichtige Schatten für verschiedene Elevations-Stufen. Höhere Elevation = Element schwebt weiter über der Oberfläche.

/* Elevation 1 - Karte */
.dp-1 {
  box-shadow:
    0 1px 3px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.24);
}

/* Elevation 6 - FAB */
.dp-6 {
  box-shadow:
    0 3px 6px rgba(0,0,0,0.16),
    0 3px 6px rgba(0,0,0,0.23);
}

/* Elevation 24 - Dialog */
.dp-24 {
  box-shadow:
    0 14px 28px rgba(0,0,0,0.25),
    0 10px 10px rgba(0,0,0,0.22);
}

<div class="md-demo">
<div class="md-card md-1"><span>dp 1</span><span class="md-label">Karte</span></div>
<div class="md-card md-2"><span>dp 6</span><span class="md-label">FAB</span></div>
<div class="md-card md-3"><span>dp 12</span><span class="md-label">Drawer</span></div>
<div class="md-card md-4"><span>dp 24</span><span class="md-label">Dialog</span></div>
</div>

Inset-Schatten

inset erzeugt innere Schatten für eingebettete oder eingepresste Effekte, nützlich für Input-Felder oder gedrückte Buttons.

.input-field {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}

.pressed-button {
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.2),
    inset 0 -2px 4px rgba(255,255,255,0.5);
}

<div class="inset-demo">
<div class="inset-box inset-1">Oben inset</div>
<div class="inset-box inset-2">Unten inset</div>
<div class="inset-box inset-3">Kombiniert</div>
</div>

Farbige Schatten & Glow

Mit farbigen Schatten erzeugst du leuchtende Glow-Effekte. Nutze dafür große Blur-Werte und kräftige Farben.

.glow-blue {
  box-shadow: 0 0 20px rgba(26,86,219,0.6);
}

.glow-multi {
  box-shadow:
    0 0 10px rgba(236,72,153,0.4),
    0 0 30px rgba(236,72,153,0.2),
    0 0 60px rgba(236,72,153,0.1);
}

<div class="glow-demo">
<div class="glow-box g-blue">Blau</div>
<div class="glow-box g-purple">Lila</div>
<div class="glow-box g-green">Grün</div>
<div class="glow-box g-multi">Multi</div>
</div>

Hover-Lift-Effekt

Eine Card schwebt beim Hover nach oben und bekommt einen tieferen Schatten. Die Kombination aus transform: translateY und box-shadow-Transition ist ein Klassiker.

.card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

<div class="lift-demo">
<div class="lift-card">
  <h4>Card A</h4>
  <p>Hover mich für den Lift-Effekt</p>
</div>
<div class="lift-card">
  <h4>Card B</h4>
  <p>Schatten und Position ändern sich</p>
</div>
</div>

Barrierefreiheit

Schatten dienen nur der Dekoration und haben keinen Einfluss auf die Barrierefreiheit: Sie werden von Screenreadern komplett ignoriert. Verlass dich deshalb nie allein auf Schatten, um Status oder Fokus zu signalisieren. Eine Focus-Anzeige braucht immer ein sichtbares outline zusätzlich zum Schatten.

Nutzer im Hochkontrast-Modus (Windows) sehen keine Schatten, weil Schatten durch den Hochkontrast-Modus deaktiviert werden. Wenn dein Design Schatten als einzigen visuellen Trenner zwischen Elementen verwendet, wird die Struktur im Hochkontrast-Modus unsichtbar. Verwende zusätzlich Borders als Fallback.

Animierte Schatten auf Hover sollten subtil bleiben. Stark flackernde oder pulsierende Schatten können bei lichtempfindlichen Nutzern Probleme verursachen.

Häufige Fehler

• Zu viele Schatten auf einer Seite. Wenn jedes Element einen fetten Schatten hat, geht der Tiefen-Effekt verloren. Setze Schatten gezielt ein, um Hierarchie zu zeigen.
• Pechschwarze Schatten mit rgba(0,0,0,1) verwenden. Echte Schatten sind nie schwarz, sondern leicht transparent. Nutze Werte wie rgba(0,0,0,0.1) bis rgba(0,0,0,0.25) für natürliche Schatten.
• Vergessen, dass box-shadow dem border-radius folgt. Ein Schatten auf einem runden Element ist ebenfalls rund. Das ist meistens erwünscht, aber bei komplexen Formen kann es überraschen.
• box-shadow für Text-Schatten verwenden. Text hat text-shadow, das die Buchstabenform nachzeichnet. box-shadow umgibt nur die Box des Elements.
• Performance-Problem: box-shadow-Transitions können bei sehr großen Elementen oder vielen animierten Schatten gleichzeitig ruckeln, weil sie nicht GPU-beschleunigt sind. Für performante Schatten-Animationen nutze ein Pseudo-Element mit dem Schatten und animiere dessen opacity.

Browser-Kompatibilität

box-shadow wird von allen modernen Browsern vollständig unterstützt, einschließlich mehrerer Schatten und inset.

Email-Kompatibilität

box-shadow wird in den meisten Email-Clients nicht unterstützt. Nur webbasierte Clients haben teilweise Support.

Verwandte Eigenschaften