box-shadow

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.

Steckbrief box-shadow

Syntax: box-shadow: [inset] <offset-x> <offset-y> [<blur>] [<spread>] <color>
Initialwert: none
Vererbt: Nein
Animierbar: Ja

Kategorie: Transformationen
Werte: 6
Beispiele: 5
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 15.02.2026

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

6 Werte

Wert	Beschreibung	Beispiel
`none`	Kein Schatten. (Standard)	box-shadow: none;
`<offset-x> <offset-y>`	Horizontaler und vertikaler Versatz. Positive Werte gehen nach rechts/unten.	box-shadow: 4px 4px black;
`<blur-radius>`	Weichzeichnung des Schattens. 0 = scharfer Rand, höhere Werte = weicher.	box-shadow: 4px 4px 10px black;
`<spread-radius>`	Breitet den Schatten aus (positiv) oder zieht ihn zusammen (negativ).	box-shadow: 0 4px 10px -2px black;
`inset`	Schatten wird innerhalb des Elements gerendert statt außen.	box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
`Mehrere Schatten`	Durch Kommas getrennt. Erster Schatten liegt oben.	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

Beispiele

5 Beispiele

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

Schatten-Variationen

.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 nutzt mehrschichtige Schatten für verschiedene Elevations-Stufen. Höhere Elevation = Element schwebt weiter über der Oberfläche.

Material Design Elevation

/* 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 erzeugt innere Schatten für eingebettete oder eingepresste Effekte, nützlich für Input-Felder oder gedrückte Buttons.

Inset-Schatten

.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>

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

Farbige Glow-Effekte

.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>

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

Hover-Lift mit Schatten

.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

5 Punkte

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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

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

Apple Mail

Komplett
Gmail

Keine

box-shadow wird entfernt
Outlook

Keine

Kein Support für box-shadow
Thunderbird

Komplett
Yahoo Mail

Keine

box-shadow wird ignoriert

Steckbrief box-shadow

Syntax: box-shadow: [inset] <offset-x> <offset-y> [<blur>] [<spread>] <color>
Initialwert: none
Vererbt: Nein
Animierbar: Ja

Kategorie: Transformationen
Werte: 6
Beispiele: 5
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 15.02.2026

Inhalt

7 Kapitel

Verwandt

text-shadow filter border

Üben /lernen/css

Im CSS-Kurs gestaltest du echte Seiten selbst und prüfst jede Aufgabe direkt im Browser.

Zum CSS-Kurs

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da