Anleitung

Wählen Sie eine Voreinstellung oder passen Sie Versatz, Unschärfe, Ausdehnung, Farbe und Deckkraft der ersten Ebene an.
Fügen Sie weitere Ebenen für eine natürlichere Tiefenwirkung hinzu oder aktivieren Sie „Inset“ für einen inneren Schatten.
Passen Sie den Hintergrund der Vorschau und die Boxfarbe an Ihr Design an und kopieren Sie anschließend das CSS.

So funktioniert es

box-shadow nimmt pro Ebene folgende Werte entgegen: horizontaler Versatz, vertikaler Versatz, Unschärferadius, Ausdehnungsradius und Farbe. Optional kann inset vorangestellt werden. Positive Versatzwerte verschieben den Schatten nach rechts und unten. Die Unschärfe macht die Kanten weicher und kann nicht negativ sein. Die Ausdehnung vergrößert (bei positiven Werten) oder verkleinert (bei negativen Werten) den Schatten vor dem Weichzeichnen. Mehrere Ebenen werden durch Kommas getrennt; die erste liegt oben.

Realistische Tiefe entsteht meist durch einen kleinen, scharf abgegrenzten Schatten in Kombination mit einem größeren, weicheren Schatten mit niedriger Deckkraft – so funktioniert auch die Voreinstellung „Erhaben“. Farben werden als rgba() angegeben, damit die Deckkraft explizit festgelegt ist. Schatten folgen dem border-radius des Elements und nehmen keinen Platz im Layout ein. Sie verschieben daher niemals andere Elemente.

Schatten mit sehr großen Unschärferadien auf vielen Elementen können das Scrollen auf leistungsschwachen Smartphones verlangsamen. Wenn Sie einen Schatten animieren, wirkt es meist flüssiger, ein Pseudoelement mit bereits vorhandenem Schatten einzublenden, statt box-shadow selbst zu animieren.

Beispiele

Karte auf hellem Hintergrund

box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); verleiht einer Karte eine scharfe Kante und zugleich eine weiche Erhebung.

Fokusring ohne Layoutverschiebung

Eine Ebene mit Versatz 0, Unschärfe 0 und einer Ausdehnung von 3px in Ihrer Markenfarbe erzeugt einen durchgehenden Ring um einen Button. Anders als ein Rahmen verändert er nicht die Größe des Elements.

Eingabefeld mit Druckeffekt

inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) lässt ein Textfeld leicht vertieft wirken.

Häufig gestellte Fragen

Was ist der Unterschied zwischen box-shadow und filter: drop-shadow()?

box-shadow folgt dem Elementkasten und dem border-radius und unterstützt Ausdehnung und inset. drop-shadow() folgt der sichtbaren Form, einschließlich transparenter Bereiche von PNG- oder SVG-Bildern, unterstützt aber weder Ausdehnung noch inset.

Warum wird mein Schatten abgeschnitten?

Ein Elternelement mit overflow: hidden schneidet alles außerhalb seines Kastens ab – auch Schatten. Fügen Sie dem Elternelement Innenabstand hinzu oder ändern Sie die overflow-Regel.

Wie viele Ebenen sollte ich verwenden?

Für die meisten Benutzeroberflächen reichen ein oder zwei Ebenen. Mehr Ebenen können weicher wirken, brauchen beim Rendern aber etwas mehr Leistung – besonders bei langen Listen.

Datenschutz

Das CSS wird in Ihrem Browser erzeugt. Es wird nichts hochgeladen oder gespeichert.