CSS box-shadow: weiche, geschichtete Schatten, die echt wirken

Ein CSS box-shadow wird als box-shadow: 0 4px 12px rgb(0 0 0 / 0.15) geschrieben: ein horizontaler Versatz, ein vertikaler Versatz, ein Unschärferadius, eine optionale Ausbreitung und eine Farbe. Dieser einzelne Schatten reicht für einen schnellen Prototyp, wirkt aber selten echt. Die Schatten, die das Auge überzeugen, sind geschichtet: mehrere Schatten an einem Element, jeder größer und blasser als der vorige, passend zur Fläche darunter getönt.

Syntax von box-shadow

/* inset? | offset-x | offset-y | blur | spread | color */
.card { box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15); }

/* Negative spread tucks the shadow under the box */
.card { box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.25); }

/* Inset: a shadow inside the box, like a pressed well */
.well { box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.12); }

/* Spread only: a hairline that follows border-radius */
.chip { box-shadow: 0 0 0 1px rgb(15 23 42 / 0.08); }

/* Several shadows, comma separated, first on top */
.card { box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 8px 16px rgb(0 0 0 / 0.08); }

Warum ein einzelner Schatten künstlich wirkt

Leg ein Buch auf einen Tisch und sieh dir seinen Schatten an. Direkt an der Kante, wo es aufliegt, ist der Schatten dunkel und scharf. Weiter draußen wird er breit und blass, weil Licht das Objekt aus vielen Richtungen umfließt. Ein box-shadow kann immer nur eines davon sein: eng und hart oder breit und verschwommen. So oder so merkt das Auge, dass etwas fehlt.

So schichtest du box-shadows

Die Methode ist einfach: Fang klein und scharf an und verdopple dann Versatz und Unschärfe für jede weitere Ebene, wobei jede Ebene blass bleibt. Wo sich die Ebenen überlagern, addieren sich die Deckkräfte, daher können einzelne Werte überraschend niedrig sein.

1. 1

   Beginne mit einem Kontaktschatten

   0 1px 1px mit etwa 8 Prozent Deckkraft. Das ist die dunkle Linie direkt unter der Kante.

2. 2

   Verdopple für jede Ebene

   Dann 0 2px 2px, 0 4px 4px, 0 8px 8px. Versatz und Unschärfe wachsen gemeinsam, so scheint das Licht von oben zu kommen.

3. 3

   Halte jede Ebene blass

   Jeweils zwischen 5 und 10 Prozent. Wirkt das Ergebnis schwer, entferne die größte Ebene, bevor du irgendetwas dunkler machst.

4. 4

   Töne die Farbe

   Ersetze Schwarz durch eine tiefe Version des Hintergrundtons, etwa Marineblau auf blauen Seiten oder Braun auf Creme.

:root {
  /* Shadow colour as channels, so opacity can vary per layer */
  --shadow-color: 222 47% 11%;

  --shadow-sm:
    0 1px 1px hsl(var(--shadow-color) / 0.08),
    0 2px 2px hsl(var(--shadow-color) / 0.06);

  --shadow-md:
    0 1px 1px hsl(var(--shadow-color) / 0.08),
    0 2px 2px hsl(var(--shadow-color) / 0.07),
    0 4px 4px hsl(var(--shadow-color) / 0.06),
    0 8px 8px hsl(var(--shadow-color) / 0.05);

  --shadow-lg:
    0 1px 1px hsl(var(--shadow-color) / 0.07),
    0 2px 2px hsl(var(--shadow-color) / 0.07),
    0 4px 4px hsl(var(--shadow-color) / 0.06),
    0 8px 8px hsl(var(--shadow-color) / 0.06),
    0 16px 16px hsl(var(--shadow-color) / 0.05),
    0 32px 32px hsl(var(--shadow-color) / 0.04);
}

.card { box-shadow: var(--shadow-md); }
.dialog { box-shadow: var(--shadow-lg); }

Schatten als Variablen zu speichern macht sie zu Design Tokens, was jede Karte, jedes Menü und jeden Dialog konsistent hält. CSS-Variablen fürs Theming und Design Tokens zeigen, wie du sie in ein ganzes Theme einbindest.

Eine Höhenskala für ein Interface

Schatten signalisiert Höhe, also sollte er überall dasselbe bedeuten. Wähle drei oder vier Stufen und weise sie Aufgaben zu. Alles, was höher schwebt, bekommt einen größeren, weicheren Schatten, niemals nur einen dunkleren.

Schatten auf farbigen und dunklen Hintergründen

Reinschwarze Schatten werden auf einer farbigen Fläche grau und trüb, so wie Schwarz in Farbe gemischt sie stumpf macht. Nimm die Schattenfarbe stattdessen aus dem Hintergrund: ein tiefer Petrolschatten auf einer Mintseite, ein dunkles Pflaume auf einer fliederfarbenen. Auf Verlaufshintergründen nimm den dunkelsten Farbstopp des Verlaufs und nutze ihn mit geringer Deckkraft.

Im Dark Mode verschwinden Schatten fast, weil kaum Licht da ist, das sie blockieren könnten. Zeig Höhe stattdessen, indem du erhöhte Flächen etwas heller machst, und behalte eine feine Haarlinie an der Kante. Dark-Mode-Design geht die Flächenfarben durch. Für Panels über Bildern trennt ein backdrop-filter Ebenen oft besser als ein schwererer Schatten.

box-shadow ruckelfrei animieren

Ändert sich box-shadow beim Hover, muss der Browser den Schatten in jedem Frame des Übergangs neu zeichnen. Bei einem Button ist das kein Problem. Bei einem Raster aus fünfzig Karten ruckelt es. Die übliche Lösung: Leg den größeren Schatten auf ein Pseudo-Element und blende seine Deckkraft ein, was der Browser günstig compositen kann.

.card {
  position: relative;
  box-shadow: var(--shadow-sm);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}

.card:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .card::after { transition: none; }
}

Mehr dazu, was Zeichenzeit kostet, steht in Performance von CSS-Verläufen, und derselbe Schichtansatz passt zu Buttons in Verlaufsbuttons in CSS.

Wann du den Schatten weglässt

Schatten trennen eine Fläche von dem, was dahinter liegt. Ist der Hintergrund ein satter Verlauf oder ein Foto, kämpft ein starker Schatten gegen ihn. Oft tut ein ruhigerer Hintergrund mehr für die Karte als jeder Schatten. Gradiently Marks sind dafür gebaut: Jeder ist ein lebendiger Hintergrund mit eigenen Farben, eigenem Licht und eigener Körnung, und die Worte darauf bleiben lesbar, weil der Mark sich hinter ihnen beruhigt, ohne dass Kästen oder Schatten die Arbeit machen.