CSS Box-Shadow erklärt: Syntax, Unschärfe, Streuung und Performance

Sie kopieren einen Schatten von einem Generator, fügen ihn in Ihr Stylesheet ein, und das Ergebnis sieht nichts so aus wie die Vorschau, die Sie gerade gesehen haben. Die Unschärfe ist enorm, das Element schwebt zehn Pixel über der Seite, und ein zweiter Schatten lässt das Ganze verschwinden. Das Problem ist nicht, dass box-shadow schwer ist — sondern dass die meisten Entwickler nie gelernt haben, was jeder der fünf Werte tatsächlich kontrolliert. Dieser Leitfaden zerlegt die Eigenschaft, erklärt Unschärfe versus Streuung, zeigt geschichtete Schatten, deckt Barrierefreiheit und Performance ab und endet mit einem Werkzeug, das das Raten vollständig eliminiert.

Die fünf Werte hinter jedem box-shadow

Eine vollständige box-shadow-Deklaration sieht so aus:

box-shadow: 4px 6px 12px 0 rgba(0, 0, 0, 0.25);

Von links nach rechts gelesen. 4px ist offset-x — wie weit sich der Schatten horizontal verschiebt. 6px ist offset-y — wie weit die Verschiebung vertikal erfolgt. Diese beiden sind das Minimum: ohne sie sitzt der Schatten direkt hinter dem Element, perfekt zentriert, was selten nützlich ist. 12px ist der blur-radius. Er steuert, wie sehr der Schatten weichgezeichnet wird — er verschiebt den Schatten nicht, er federt die Kanten. 0 ist der spread-radius. Ein positiver Wert erweitert den Schatten über die Box des Elements hinaus; ein negativer Wert verkleinert ihn. Und rgba(0, 0, 0, 0.25) ist die Schattenfarbe mit 25 % Deckkraft.

Es gibt einen optionalen sechsten Wert: das Schlüsselwort inset. Wenn vorhanden, wird der Schatten innerhalb des Elements statt außerhalb gezeichnet. Inset-Schatten sind der Standardweg, um Tiefe von innen zu erzeugen — Eingabefelder, gedrückte Buttons, versenkte Karten. Das Schlüsselwort weglassen, und jeder Schatten fällt standardmäßig nach außen.

Unschärfe versus Streuung: die Verwirrung, die Stunden kostet

Diese beiden Werte werden am häufigsten vertauscht, und der visuelle Unterschied ist dramatisch. Unschärfe-Radius macht den Schatten nicht größer oder kleiner — er steuert, wie scharf die Schattenkante zur Transparenz übergeht. Eine Unschärfe von 0 erzeugt einen harten Schatten, der identisch mit der Silhouette des Elements ist. Eine Unschärfe von 20px erzeugt einen weiten, weichen Gradienten, der weit über das Element hinausblutet. Der Browser setzt dies als Gaußsche Unschärfe auf dem Schatten-Bitmap um, bevor er ihn unter das Element komponiert.

Der Streuungs-Radius hingegen ist eine direkte geometrische Operation. Er bläst das Rechteck des Schattens auf oder zieht es zusammen, bevor irgendeine Unschärfe angewendet wird. Streuung von 4px macht den Schatten auf jeder Seite 4px größer; -4px verkleinert ihn um 4px. Die praktische Wirkung: Streuung bestimmt, wie sichtbar der Schatten überhaupt ist, während die Unschärfe bestimmt, wie weich er wirkt. Ein häufiger Trick für eine dezente erhobene Karte ist es, die Unschärfe moderat zu halten und die Streuung bei Null oder leicht negativ zu lassen — das vermeidet den "großen dunklen Halo", der bei großer Unschärfe ohne Streuung-Anpassung entsteht.

Geschichtete Schatten: eine Eigenschaft, mehrere Werte

CSS erlaubt das Stapeln mehrerer Schatten auf demselben Element durch Komma-Trennung. Jede Schicht wird von oben nach unten gerendert — der erste Schatten liegt oben, jeder folgende Schatten dahinter. So werden realistische Tiefeffekte erzeugt: ein einzelner Schatten wirkt flach und künstlich, aber zwei oder drei sorgfältig abgestimmte Schichten erzeugen die nuancierte Schattierung, die unsere Augen mit realen Objekten assoziieren.

.card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.07),
    0 4px 8px rgba(0, 0, 0, 0.12),
    0 12px 24px rgba(0, 0, 0, 0.08);
}

In diesem Beispiel ist der erste Schatten ein enger, niedrig deckender Akzent direkt unter der Karte — er simuliert den Kontaktschatten, wo die Oberfläche den Tisch berührt. Der zweite erzeugt das Hauptgefühl der Erhebung mit einer mittleren weichen Streuung. Der dritte ist ein weiter, schwacher Schleier, der das gesamte Umgebungslicht andeutet. Das Ergebnis liest sich als natürliche Tiefe und nicht als flacher grauer Schleier.

Häufige Fehler und wie man sie behebt

Der häufigste Fehler ist eine Unschärfe, die viel zu groß für das Element ist. Ein 36px hoher Button sollte keine 60px-Unschärfe haben — das Ergebnis ist eine diffuse Wolke, die das Element vollständig von der Oberfläche loslöst. Als Faustregel: halten Sie die Unschärfe zwischen 0,5× und 2× der kürzeren Elementseite für natürlich wirkende Erhebung.

Der zweite Fehler ist, die implizite zweite Schicht zu vergessen. Wenn ein Design "den Schatten auf dem Mockup" aufruft, sieht er so aus, weil der Designer in Figma oder Sketch zwei oder drei box-shadows übereinander gelegt hat. Das Kopieren nur des obersten sichtbaren Schattens produziert einen Schatten, der zu scharf oder zu dunkel wirkt. Prüfen Sie immer, ob das Mockup geschichtete Schatten verwendet — das ist fast immer der Fall.

Eine weitere Falle ist die gleichzeitige Verwendung von filter: drop-shadow() und box-shadow. Sie sind nicht dasselbe. Box-shadow folgt dem rechteckigen border-box des Elements, während drop-shadow Alpha-Transparenz respektiert — ein Element mit transparentem Hintergrund und einem abgerundeten SVG-Icon bekommt einen Schatten, der die Icon-Form nachzeichnet. Aber drop-shadow kann keine Streuung, kein inset und ist bei langen Listen langsamer.

• Zu große Unschärfe: halten Sie die Unschärfe proportional zur Elementgröße; 4px–16px deckt die meisten UI-Karten.
• Flachheit durch eine Schicht: stapeln Sie mindestens zwei Schatten — einen engen Kontaktschatten und einen breiten Umgebungsschatten.
• Zu großer Offet: Offsets über 8–10px machen das Element abgehoben; für realistische Erhebung klein halten.
• Inset vergessen: gedrückte Buttons und Eingabefelder brauchen fast immer Inset-Schatten, keine außenliegenden.

Barrierefreiheit: beschatteter Text und Kontrast

Box-shadow auf einem Container ist in der Regel für die Barrierefreiheit unbedenklich — er beeinflusst nicht die Kontrastverhältnisse des Textes. Aber text-shadow, der ähnlich funktioniert, kann die Lesbarkeit bei übermäßigem Einsatz beeinträchtigen. WCAG 2.1 regelt text-shadow nicht direkt, aber die Kontrastanforderung zwischen Text und benachbartem Hintergrund gilt weiterhin. Ein text-shadow in derselben Farbe wie der Hintergrund erzeugt einen Haloeffekt, der Buchstabenformen für Sehbehinderte verschwimmen lassen kann.

Die praktische Regel: halten Sie die text-shadow-Unschärfe klein (1px–2px), verwenden Sie niedrige Deckkraft (unter 30 %) und verlassen Sie sich niemals allein auf einen Schatten, um Text von einem bildlastigen Hintergrund zu trennen. Wenn der Hintergrund ein Bild oder Gradient ist, ist der Schatten dekorativ — zwischen Textfarbe und dem dunkelsten/hellsten unterliegenden Ton des Hintergrunds muss immer noch ausreichender Kontrast bestehen. Im Zweifel prüfen Sie das Element mit sichtbarem Hintergrund in einem Kontrast-Checker.

Performance: box-shadow versus Filter versus Bilder

Box-shadow ist eine CSS-Eigenschaft, die Browser beim Malen der Elementschicht rasterisieren. Auf moderner Hardware hat eine Handvoll box-shadows vernachlässigbare Kosten. Das Performance-Problem taucht in zwei Szenarien auf: lange scrollbare Listen mit dutzenden beschatteten Elementen und Schatten auf Elementen mit vielen Kindern, die bei Animation häufige Neumalungen auslösen.

Die allgemeine Empfehlung: verwenden Sie box-shadow für UI-Komponenten, filter: drop-shadow(), wenn alpha-gezeichnete Schatten auf Bildern oder Icons benötigt werden, und vermeiden Sie vorgerenderte Schatten-Bilder, sofern das visuelle Motiv nicht wirklich komplex und statisch ist. Die Animation von box-shadow ist möglich, löst aber pro Frame einen Neumalvorgang aus; für gleichmäßige 60-fps-Animation erwägen Sie transform: translateZ(0) oder will-change: transform, um das Element auf eine eigene Compositor-Schicht zu befördern, oder Sie platzieren den Schatten auf einem Pseudo-Element, das unabhängig befördert wird.

Der Box-Shadow-Generator auf Convrs

Convrs bietet einen Box-Shadow-Generator der das Raten bei der Schattenerstellung eliminiert. Stellen Sie Offet-x, Offet-y, Unschärfe, Streuung und Farbe mit Schiebereglern ein und sehen Sie eine Live-Vorschau des Ergebnisses auf verschiedenen Hintergrundfarben. Fügen Sie Schichten hinzu und ordnen Sie sie neu an, um realistische Tiefe zu erzeugen. Jede Änderung aktualisiert die CSS-Ausgabe sofort — kopieren Sie sie direkt in Ihr Stylesheet. Das Tool läuft vollständig in Ihrem Browser; keine Schattenwerte oder Vorschaubilder werden an einen Server gesendet.