Ausführbare CSS-Docs: CSS Schatten

Q: Wie lautet die Syntax von box-shadow?

box-shadow: offset-x offset-y blur spread color;, zum Beispiel box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);. Nur die beiden Versätze sind Pflicht; mit inset wird der Schatten innerhalb der Box gezeichnet.

So funktioniert box-shadow

box-shadow malt einen Schatten um die Border-Box eines Elements. Er folgt border-radius, nimmt im Layout keinen Platz ein und braucht mindestens zwei Werte: wie weit er horizontal und vertikal verschoben wird.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 16px; }
    .row { display: flex; gap: 24px; flex-wrap: wrap; }
    .card {
      width: 150px; padding: 20px 12px; text-align: center;
      background: white; border-radius: 10px; font-size: 14px;
    }
    .hard { box-shadow: 6px 6px 0 #111827; }
    .soft { box-shadow: 0 4px 12px rgb(0 0 0 / 15%); }
    .inset { box-shadow: inset 0 2px 6px rgb(0 0 0 / 25%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="card hard">6px 6px 0 #111827</div>
    <div class="card soft">0 4px 12px, 15% black</div>
    <div class="card inset">inset 0 2px 6px</div>
  </div>
</body>
</html>

Die Syntax

box-shadow: [inset] <offset-x> <offset-y> [<blur>] [<spread>] [<color>];

Wert	Bedeutung	Standard
`inset`	Zeichnet den Schatten innerhalb der Box, wie eine eingedrückte Fläche	Außen
offset-x	Positiv schiebt nach rechts, negativ nach links	Pflicht
offset-y	Positiv schiebt nach unten, negativ nach oben	Pflicht
blur	Wie weich die Kante ist; darf nicht negativ sein	`0` (harte Kante)
spread	Vergrößert (positiv) oder verkleinert (negativ) den Schatten	`0`
color	Jede Farbe; ein halbtransparentes Schwarz sieht meist am besten aus	Die Textfarbe

Die Anzahl der Längen bestimmt ihre Bedeutung: Zwei sind die Versätze, drei ergänzen die Unschärfe, vier den Spread. Probier es aus:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box {
      width: 160px; height: 90px; margin: 32px;
      background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px;
    }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>box-shadow: <input id="val" value="0 10px 20px -5px rgb(37 99 235 / 50%)" size="36"></label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.boxShadow = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(box).boxShadow;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Probier 0 0 0 4px #f59e0b (ein Ring), inset 0 0 12px #2563eb und -8px -8px 0 #16a34a.

Spread: Ringe und einseitige Schatten

Spread ändert die Größe des Schattens vor dem Weichzeichnen. Daraus entstehen zwei Muster:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spread</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
    .box { width: 140px; padding: 18px 10px; text-align: center; background: white; border: 1px solid #e5e7eb; font-size: 14px; }
    .ring { box-shadow: 0 0 0 4px #2563eb; border-radius: 8px; }
    .double { box-shadow: 0 0 0 3px white, 0 0 0 6px #16a34a; border-radius: 8px; }
    .bottom { box-shadow: 0 10px 8px -8px rgb(0 0 0 / 50%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="box ring">4px ring</div>
    <div class="box double">gap then ring</div>
    <div class="box bottom">bottom only</div>
  </div>
</body>
</html>

Ein Ring: kein Versatz, keine Unschärfe, nur Spread. Anders als ein Rahmen ändert er die Größe des Elements nicht und ist deshalb ein guter Fokusindikator (:focus-visible { box-shadow: 0 0 0 3px #2563eb; }).
Ein Ring mit Lücke: Leg einen weißen Spread unter einen farbigen, größeren.
Nur eine Seite: Verschieb den Schatten nach unten und verkleinere ihn mit negativem Spread, sodass er nur unten hervorschaut.

Mehrere Schatten für realistische Tiefe

Echte Schatten haben nahe am Objekt einen dunklen, scharfen Teil und weiter weg einen weichen, blassen. Zwei oder drei Ebenen ahmen das viel besser nach als eine große Unschärfe:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Elevation</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 24px 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; }
    .card { width: 140px; padding: 24px 10px; text-align: center; background: white; border-radius: 12px; font-size: 14px; }
    .one { box-shadow: 0 10px 30px rgb(0 0 0 / 30%); }
    .layered {
      box-shadow:
        0 1px 2px rgb(0 0 0 / 12%),
        0 4px 8px rgb(0 0 0 / 8%),
        0 12px 24px rgb(0 0 0 / 8%);
    }
    .lift { transition: transform 0.2s, box-shadow 0.2s; }
    .lift:hover {
      transform: translateY(-4px);
      box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 16px 32px rgb(0 0 0 / 14%);
    }
  </style>
</head>
<body>
  <div class="row">
    <div class="card one">One heavy shadow</div>
    <div class="card layered">Three layers</div>
    <div class="card layered lift">Hover me</div>
  </div>
</body>
</html>

Der erste Schatten in der Liste wird obenauf gemalt. Nimm als Schattenfarbe halbtransparentes Schwarz oder einen dunklen Ton des Hintergrunds, nie reines Grau, damit sie abdunkeln, was darunter liegt.

Inset-Schatten

inset zeichnet den Schatten innerhalb der Padding-Box, als wäre die Fläche eingedrückt. Das passt zu Texteingabefeldern, Vertiefungen und gedrückten Buttons:

input {
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
}
button:active {
  box-shadow: inset 0 3px 6px rgb(0 0 0 / 30%);
}

Ein Inset-Schatten wird über dem Hintergrund, aber unter dem Inhalt gezeichnet. Schatten, die den Buchstabenformen statt der Box folgen, sind text-shadow.

Häufige Fehler

Reinschwarze, völlig deckende Schatten. Sie sehen aus wie eine dunkle Umrandung. Nimm 10% bis 30% Alpha.
Eine riesige Unschärfe für Tiefe. Kombiniere einen kleinen scharfen Schatten mit einem großen weichen.
Ein Schatten, der am Rand abgeschnitten wird. Ein Vorfahr mit overflow: hidden schneidet ihn ab; gib dem Vorfahren Padding oder verlege die overflow-Regel.
Negative Unschärfe. Sie ist ungültig, und die ganze Deklaration wird ignoriert.
box-shadow an vielen Elementen animieren. Das wird in jedem Frame neu gemalt. Auf aufwendigen Seiten animierst du stattdessen die opacity eines Pseudoelements, das den größeren Schatten trägt.

Häufig gestellte Fragen

Wie lautet die Syntax von box-shadow?

box-shadow: offset-x offset-y blur spread color;, zum Beispiel box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);. Nur die beiden Versätze sind Pflicht; mit inset wird der Schatten innerhalb der Box gezeichnet.

Was macht spread in box-shadow?

Es vergrößert (positiv) oder verkleinert (negativ) den Schatten, bevor er weichgezeichnet wird. Ein Schatten ohne Versatz, ohne Unschärfe und mit einem Spread von 3px ist ein einfarbiger 3px-Ring um das Element.

Wie setze ich einen Schatten nur unten?

Verschieb ihn nach unten und zieh ihn mit einem negativen Spread ein, sodass die Seiten verschwinden: box-shadow: 0 8px 6px -6px rgb(0 0 0 / 40%);.

Beeinflusst box-shadow das Layout?

Nein. Ein Schatten nimmt keinen Platz ein und verschiebt keine anderen Elemente. Deshalb eignet er sich gut für einen Fokusring oder einen Hover-Effekt ohne Layoutverschiebung. Ein Vorfahr mit overflow: hidden kann ihn abschneiden.

Kann ich mehrere box-shadows verwenden?

Ja, trenne sie durch Kommas. Der erste Schatten wird obenauf gezeichnet. Ein kleiner scharfer Schatten zusammen mit einem großen weichen wirkt natürlicher als ein einziger großer Schatten.

Verwandte Konzepte