CSS-Box-Shadows erklärt: Die fünf Teile, Schichtung und warum Ihre Schatten daneben aussehen

Sie fügen einer Karte box-shadow: 0 2px 4px rgba(0,0,0,0.2) hinzu, und sie sieht … in Ordnung aus, aber nie ganz wie die Schatten in einem echten Design. Oder Sie drehen den Blur hoch, um es „weich“ zu machen, und die ganze Karte wird zu einem grauen Schmierer. Das Problem ist fast nie Ihr Geschmack — es ist, dass box-shadow tatsächlich fünf Zahlen mit fünf verschiedenen Aufgaben ist, und die meisten behandeln sie als einen Klumpen. Diese Anleitung zerlegt die Deklaration in ihre Teile und gibt Ihnen dann das Zwei-Schichten-Muster, das die Schatten erzeugt, die Designer tatsächlich ausliefern.

Die fünf Teile

Ein Schatten ist eine Deklaration mit fünf Werten:

box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2);
/*           |    |   |   |    |
/*           |    |   |   |    +-- Farbe
/*           |    |   |   +------- Spread-Radius (vergrößert/verkleinert die Schattenbox)
/*           |    |   +----------- Blur-Radius (Weichheit der Kante)
/*           |    +--------------- Offset-y (nach unten)
/*           +-------------------- Offset-x (nach rechts)

Jeder Wert ist optional außer der Farbe — der Browser füllt Standardwerte ein: beide Offsets 0, Blur 0 (ein hartkantiger Schatten), Spread 0. Zwei häufige Missverständnisse lösen sich auf, sobald man sie als getrennte Teile liest: Ein Schatten ohne Blur ist ein solides Rechteck, das hinter das Element gezeichnet wird, und box-shadow hat nie etwas mit dem Rahmen eines Elements zu tun — es ist eine separate Box, die auf dieselbe Ebene projiziert wird.

Offset: Richtung ist eine Entscheidung

offset-x verschiebt den Schatten nach rechts (positiv) oder links (negativ); offset-y nach unten oder oben. Zwei Dinge sind es wert, verinnerlicht zu werden:

Konsistente Lichtrichtung. Wirft jede Karte einen Schatten nach 0 2px 4px (Licht von oben), behalten Sie das auf der ganzen Seite bei. Gemischte Offsets sind der schnellste Weg, eine UI kaputt wirken zu lassen.
Offset ist keine Dicke. Menschen nutzen manchmal einen großen Offset in der Annahme, er mache einen „stärkeren“ Schatten; er bewegt ihn nur weiter weg, und ein weit von seinem Element entfernter Schatten liest sich als schwebend, nicht als erhöht.

Schatten direkt unter einem Element (0 1px 2px) sagen „Ich ruhe auf der Oberfläche.“ Schatten mit größerem vertikalen Offset (0 20px 40px) sagen „Ich schwebe hoch darüber.“

Blur und Spread: Die zwei Radien

Blur steuert, wie weich die Kante ist. Null Blur = ein scharfes, hartkantiges Rechteck (gut für einen rahmenartigen Effekt, schlecht für einen realistischen Schatten). Je größer der Blur, desto mehr wird die Kante ein Verlauf und der Schatten dehnt sich in alle Richtungen um etwa die halbe Blurstärke aus — deshalb weicht 0 2px 4px nach unten und leicht nach außen auf.

Spread vergrößert (positiv) oder verkleinert (negativ) die Schattenbox selbst, bevor sie verwischt wird:

box-shadow: 0 0 0 1px rgba(0,0,0,0.1);   /* 1px solider Ring — ein Rahmen, kein Schatten */
box-shadow: 0 0 0 3px #3b82f6;           /* Fokusring */
box-shadow: 0 4px 12px -4px rgba(0,0,0,0.3); /* enger Nahtschatten per negativem Spread */

Der Negativ-Spread-Trick ist überall: -4px zieht die Schattenbox zusammen, sodass der sichtbare Schatten auch bei mittlerem Blur an den Ecken des Elements klebt und der „graue Rechteck lugt hervor“-Look vermieden wird.

Inset: Schatten, die nach innen gehen

inset klappt den Schatten in das Element hinein:

box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);  /* eingedrückt / konkav */
box-shadow: inset 0 -1px 0 rgba(255,255,255,0.4); /* inneres Highlight oben */

Inset-Schatten sind, wie Buttons als „gedrückt“ lesen, Vertiefungen als versenkt und Toggles als aktiv. Dieselben fünf Teile gelten, nur nach innen gespiegelt. Ein übliches Paar ist ein dunkler innenliegender Schatten oben in einer Vertiefung plus ein heller innenliegender Schatten unten — diese Ein-Zwei-Kombination lässt eine Rille echt wirken.

Schichtung: Der Zwei-Schichten-Kartenschatten

Sie können beliebig viele Schatten mit Kommas stapeln — der zuerst gelistete wird oben gezeichnet:

box-shadow:
  0 1px 2px rgba(0,0,0,0.06),   /* enger Kontaktschatten */
  0 8px 24px rgba(0,0,0,0.10);  /* großer weicher Umgebungsschatten */

Dieses Zwei-Schichten-Muster ist die nützlichste Idee in dieser Anleitung. Echte Schatten sind zwei verschiedene Dinge zugleich: ein Kontaktschatten direkt unter der Kante (klein, eng, sagt die genaue Basis des Elements) und ein Umgebungsschatten aus dem Raum (groß, weich, sagt, wie hoch es schwebt). Ein mittlerer Schatten liefert Ihnen keines von beiden — er sieht wie ein Schmierer aus. Passen Sie das obige Muster an und skalieren Sie die Zahlen auf Ihre Elementgröße: kleine Buttons brauchen kleinere Schichten, große Karten brauchen die Umgebungsschicht weiter außen mit niedrigerem Alpha.

text-shadow und drop-shadow

text-shadow nimmt dieselben Teile minus Spread: text-shadow: offset-x offset-y blur color. Es folgt den Glyph-Boxen, was bedeutet, dass ein großer Blur auf Text wie ein Hof um jede Buchstabenbox statt um die Buchstaben wirken kann.

Für Schatten, die den tatsächlich gerenderten Pixeln folgen — Buchstaben mit Unterlängen, transparente PNGs, SVG-Icons —, greifen Sie stattdessen zur filter-Eigenschaft:

filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));

drop-shadow zeichnet den Alphakanal des Bildes nach, ist also das richtige Werkzeug für Icons und Ausschnitte und das falsche (unscharf, teuer), wenn Sie nur einen Textschatten auf einem einfachen Label wollen.

Warum Schatten schlecht aussehen: vier Regeln

Die meisten „hässlichen“ Schatten laufen auf vier behebbare Entscheidungen hinaus:

Farbe, nicht nur Alpha. rgba(0,0,0,0.5) auf einem farbigen Hintergrund sieht wie ein blauer Fleck aus. Nutzen Sie ein niedrig-alfa-Schwarz (0,1–0,2 für Karten) oder eine Tönung des Hintergrunds selbst.
Zwei Schichten, nicht eine. Ein mittlerer Blur = matschig. Eng + Umgebung = Tiefe. Siehe den Schichtungsabschnitt oben.
Verwischen Sie nicht, was Sie sich nicht leisten können. Riesige Blur-Radien auf vielen großen Elementen sind echte Renderkosten, besonders beim Scrollen. Halten Sie die Umgebungsschicht bescheiden und lassen Sie die Kontaktschicht die Arbeit tun.
Blur muss größer als Offset sein für einen weichen Look — 0 1px 1px ist quasi eine Haarlinie, während 0 8px 8px weich ist. Sieht ein „Schatten“ wie ein Rahmen aus, bedeutet das meist Blur ≈ Offset.

Kurzreferenz

box-shadow: offset-x offset-y blur spread Farbe — fünf unabhängige Regler, nur die Farbe ist erforderlich.
Offset bewegt den Schatten; halten Sie die Lichtrichtung über die Seite konsistent.
Blur weicht die Kante auf; Spread vergrößert/verkleinert die Schattenbox vor dem Verwischen.
Negativer Spread zieht den Schatten zusammen — der Trick für „klebende“ Schatten.
inset zeichnet den Schatten innen: gedrückte Buttons, versenkte Vertiefungen, Fokusringe per 0 0 0 Npx.
Schichten Sie zwei Schatten (engen Kontakt + große Umgebung) für realistische Kartentiefe.
text-shadow hat keinen Spread; filter: drop-shadow() folgt den tatsächlichen Pixeln für Icons und Ausschnitte.
Ein Schatten, der wie ein Rahmen aussieht, hat meist Blur ≈ Offset; ein matschiger hat zu wenige Schichten oder zu viel Alpha.

Um einen Schatten zu entwerfen, ohne die fünf Zahlen von Hand zu zählen, lässt Sie der CSS-Box-Shadow-Generator Offset, Blur, Spread und Farbe ziehen, mit Live-Vorschau, und kopiert das CSS — und der Text-Shadow-Generator tut dasselbe für Typografie. Schatten gehören zum selben Layout-Werkzeugkasten wie Flexbox und Grid; sitzt die Box erst, wo Sie sie wollen, ist der Schatten das, was sie echt wirken lässt.