CSS box-shadow: Von den Grundlagen bis zu schönen UI-Effekten

Nur copy-pasten reicht nicht

CSS box-shadow ist eine der Eigenschaften, die die meisten Entwickler nur halbherzig lernen. Man kopiert einen Wert aus dem Designdokument oder findet ihn bei Stack Overflow — Hauptsache, es funktioniert. Aber wer versteht, was jeder Parameter macht, erschließt sich ein überraschend breites Spektrum an Effekten: von der kaum wahrnehmbaren Elevation-Shadow auf einer modernen Karte bis hin zu vollständigem Neumorphismus-UI und leuchtenden Neon-Buttons.

Wer beim Lesen experimentieren möchte: Der CSS Box Shadow Generator bei ToolPal bietet einen Live-Editor mit sofort kopierbarem CSS.

---

Die Syntax, erklärt

box-shadow: offset-x offset-y blur-radius spread-radius color;

Jeder Parameter genau betrachtet:

offset-x — Horizontale Verschiebung des Schattens. Positive Werte → rechts; negative → links.

offset-y — Vertikale Verschiebung. Positive Werte → unten (Standard für Lichtquelle von oben); negative → oben.

blur-radius — Unschärfe des Schattens. 0 ergibt eine scharfe Kante; höhere Werte erzeugen weichere, diffusere Schatten.

spread-radius — Vergrößert oder verkleinert den Schatten. Positive Werte machen ihn größer als das Element; negative Werte schrumpfen ihn. Optional (Standard: 0).

color — Schattenfarbe. rgba() oder hsla() für Transparenzsteuerung verwenden. Reines Schwarz (#000) wirkt oft trüb.

Ein minimaler Schatten:

.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

---

Das inset-Schlüsselwort

Das Voranstellen von inset erzeugt einen inneren Schatten statt eines äußeren:

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

Innere Schatten eignen sich für:

• Texteingaben und Textbereiche (gibt ein eingesenktes, „eingedrücktes" Aussehen)
• Gedrückte Button-Zustände
• Neumorphismus-„Pressed"-Zustände

---

Mehrere Schatten: Schichten für Realismus

Das am wenigsten genutzte Feature von box-shadow ist das Stapeln mehrerer Schatten per Komma:

.realistic-card {
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 4px 8px rgba(0, 0, 0, 0.05),
    0 8px 16px rgba(0, 0, 0, 0.04);
}

Diese geschichtete Methode ahmt nach, wie echte Schatten funktionieren. Ein einzelner großer Schatten wirkt oft flach oder unnatürlich; mehrere kleine mit abnehmender Opacity erzeugen etwas, das wirklich dreidimensional aussieht.

---

Praktische UI-Effekte

1. Karten-Elevation (Material Design)

Googles Material Design hat das Konzept popularisiert, dass UI-Elemente auf verschiedenen „Höhen" liegen — höhere Elevation bedeutet größeren, diffuseren Schatten.

/* Standardzustand */
.card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
  transition: box-shadow 0.2s ease;
}

/* Hover-Zustand */
.card:hover {
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
}

2. Weiche Schatten (modernes Minimaldesign)

Der Trend der letzten Jahre: weichere, diffusere Schatten mit niedrigerer Opacity:

.soft-card {
  background: white;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.04);
}

Für Schatten mit Markenfarbe:

.indigo-card {
  background: white;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
}

3. Glow-Effekte für Dark Mode

Glows sind einfach Schatten ohne Offset, mit großem Blur und gesättigter Farbe:

.glow-button {
  background: #6366f1;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);
}

.glow-button:hover {
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.8);
}

Für Neon-Effekte mehrere Glows stapeln:

.neon-element {
  box-shadow:
    0 0 5px #fff,
    0 0 20px #ff00ff,
    0 0 60px #ff00ff;
}

4. Neumorphismus

Neumorphismus (auch „Soft UI") war ein Designtrend, der um 2020 populär wurde. Er verwendet zwei Schatten — einen hellen und einen dunklen — auf einem Element, das dieselbe Hintergrundfarbe wie sein Container hat:

body {
  background: #e0e5ec;
}

.neumorphic-card {
  background: #e0e5ec;
  border-radius: 12px;
  box-shadow:
    8px 8px 16px #b8c0cc,
    -8px -8px 16px #ffffff;
}

Gedrückter Zustand:

.neumorphic-button:active {
  box-shadow:
    inset 4px 4px 8px #b8c0cc,
    inset -4px -4px 8px #ffffff;
}

Grenzen des Neumorphismus: Funktioniert nur auf grauen Hintergründen. Echte Accessibility-Probleme durch niedrigen Kontrast — interaktive Elemente sind schwer zu erkennen.

5. Scharfe Schatten (Retro/Bold Design)

Den Blur auf null setzen ergibt einen scharfen, versetzten Schatten — ein klassischer Retro-Effekt, der für grafische Designs wieder im Trend liegt:

.retro-card {
  background: white;
  border: 2px solid #000;
  box-shadow: 6px 6px 0 #000;
}

.retro-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 #000;
}

6. Fokus-Ring-Ersatz

box-shadow wird häufig als elegantere Alternative zum Browser-Standard-Outline für Fokuszustände verwendet:

.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
}

---

Häufige Fehler

Reines Schwarz (#000) direkt verwenden: Wirkt fast immer falsch. Mit rgba(0, 0, 0, 0.1) bis rgba(0, 0, 0, 0.3) beginnen.

Nur ein großer Blur, eine Ebene: Ein einzelner 0 20px 60px rgba(0,0,0,0.3)-Schatten sieht oft wie ein Schmierfleck aus. 2–4 Schichten stapeln.

Hintergrundfarbe ignorieren: Neumorphismus bricht, wenn die Elementhintergrundfarbe nicht mit dem Container übereinstimmt.

Negativen spread-radius nicht nutzen: Negativer Spread zieht den Schatten ein und kann ihn nur auf einer Seite sichtbar machen:

/* Schatten nur unten */
.bottom-shadow {
  box-shadow: 0 8px 8px -6px rgba(0, 0, 0, 0.3);
}

---

Performance-Überlegungen

box-shadow rendert außerhalb der Browser-Compositing-Schicht und löst Repaints aus, wenn er sich ändert. Für die meisten UIs ist das kein Problem. Aber beim gleichzeitigen Animieren von Schatten auf vielen Elementen oder auf großen Flächen kann es ruckeln.

filter: drop-shadow() für GPU-Beschleunigung verwenden:

/* Filter-Version (GPU-compositing möglich) */
.card {
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.2));
}

filter: drop-shadow() hat einen Vorteil: Es funktioniert auch auf unregelmäßigen Formen und transparenten Elementen (wie SVGs und PNGs mit Transparenz). Nachteil: Kein inset, keine mehreren Schatten per Komma, kein spread-radius.

---

Spickzettel

/* Subtile Karten-Elevation */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

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

/* Mehrschichtig realistisch */
box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);

/* Glow-Effekt */
box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);

/* Neumorphismus */
box-shadow: 8px 8px 16px #b8c0cc, -8px -8px 16px #ffffff;

/* Retro-Schatten scharf */
box-shadow: 4px 4px 0 #000;

/* Fokus-Ring */
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);

/* Nur unten Schatten */
box-shadow: 0 8px 8px -6px rgba(0, 0, 0, 0.3);

/* Innerer gedrückter Zustand */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);

---

Fazit

box-shadow ist einfach genug, um die Grundlagen in fünf Minuten zu lernen, und tief genug, um auch nach Jahren noch neue Tricks zu entdecken. Die wichtigsten Punkte:

1. Mehrere Schatten schichten statt eines einzelnen großen
2. rgba() mit niedrigem Alpha-Wert — kein volles Schwarz
3. inset für Eingabefelder und gedrückte Zustände
4. Negativer Spread für gerichtete Schatten
5. Für performance-kritische Animationen filter: drop-shadow() erwägen

Der CSS Box Shadow Generator ist der schnellste Weg, diese Muster zu verinnerlichen.