So verwenden Sie es
- Stellen Sie Waagerechter Versatz (px) und Senkrechter Versatz (px) der ersten Ebene ein. Ein positiver senkrechter Versatz verschiebt den Schatten nach unten.
- Erhöhen Sie die Weichzeichnung (px), damit der Rand weicher wird, und die Ausbreitung (px), damit der Schatten größer oder kleiner als der Kasten wird.
- Wählen Sie eine Farbe und eine Deckkraft. Mit Ebene hinzufügen fügen Sie weitere Ebenen hinzu, für einen natürlicher wirkenden Schatten.
- Kopieren Sie die Deklaration unter CSS und fügen Sie sie in die Regel Ihres Elements ein.
So wird der Wert gebildet
Die Eigenschaft box-shadow nimmt einen oder mehrere Schatten, durch Kommas getrennt. Jeder wird geschrieben als optionales Schlüsselwort inset, der waagerechte und der senkrechte Versatz, der Weichzeichnungsradius, die Ausbreitung und eine Farbe. Der erste Schatten wird über den anderen gezeichnet. Ohne Schatten lautet der Wert none.
Der Weichzeichnungsradius ist nie negativ. Eine größere Weichzeichnung verteilt den Schatten weicher über einen breiteren Bereich. Ein Schatten mit Ausbreitung wird vor der Weichzeichnung größer oder kleiner. Die Deckkraft wird als Alphawert einer rgba-Farbe geschrieben, mit höchstens zwei Nachkommastellen.
box-shadow: [inset] offset-x offset-y blur spread color, ...Ebenen und was der Rechner prüft
Ein weicher, natürlicher Schatten hat oft zwei Ebenen: eine kleine, dunkle nahe am Kasten und eine größere, hellere weiter außen. Jede Ebene ist ein Schatten im Wert. Der Rechner erlaubt bis zu 8 Ebenen, Versatz und Ausbreitung von −200 bis 200 Pixeln, die Weichzeichnung von 0 bis 200 Pixeln und die Deckkraft von 0 bis 100 %.
Die Vorschau nutzt denselben Wert wie der Code, daher sehen Sie genau das, was der Browser zeichnet. Sehr große Weichzeichnungen und Ausbreitungen brauchen auf einem alten Handy länger zum Zeichnen. Verwenden Sie daher die kleinsten Werte, die ihren Zweck erfüllen.
Rechenbeispiel: eine Karte mit zwei Ebenen
Die erste Ebene hat einen Versatz von 0 und 4 Pixeln, eine Weichzeichnung von 6 und keine Ausbreitung, in Schwarz mit 10 % Deckkraft. Die zweite hat einen Versatz von 0 und 10 Pixeln, eine Weichzeichnung von 20 und 15 % Deckkraft. Der Wert lautet 0px 4px 6px 0px rgba(0, 0, 0, 0.1), 0px 10px 20px 0px rgba(0, 0, 0, 0.15).
In eine Karte eingefügt, ergibt das einen Schatten, der unter der Karte scharf und weiter unten weich ist.
Häufig gestellte Fragen
Was bewirkt inset?
Ein Innenschatten wird innerhalb des Kastens entlang seiner Ränder gezeichnet, als wäre der Kasten eingedrückt. Er eignet sich für Eingabefelder und für einen gedrückten Knopf. Ein Kasten kann Innen- und Außenschatten gemeinsam haben.
Warum haben die Versätze ein Vorzeichen?
Ein positiver waagerechter Versatz verschiebt den Schatten nach rechts, ein negativer nach links. Ein positiver senkrechter Versatz verschiebt ihn nach unten, daher hat ein Schatten unter einem Kasten einen positiven Wert.
Was ist der Unterschied zwischen Weichzeichnung und Ausbreitung?
Die Weichzeichnung macht den Rand des Schattens weicher, sodass er über einen breiteren Bereich ausläuft. Die Ausbreitung macht den Schatten selbst größer, bei negativem Wert kleiner, bevor er weichgezeichnet wird. Die Weichzeichnung sinkt nie unter null, die Ausbreitung kann es.
Ist das erzeugte CSS mit allen Browsern kompatibel?
Die Eigenschaft box-shadow ohne Herstellerpräfix mit mehreren durch Kommas getrennten Ebenen und rgba-Farben wird von allen aktuellen Browsern unterstützt und ist es seit Jahren. Die Deklaration kann daher ohne Herstellerpräfix unverändert verwendet werden.
Speichert oder sendet der Editor etwas?
Nein. Der Schatten wird in Ihrem Browser gezeichnet, und nichts wird gespeichert oder an unseren Server gesendet. Kopieren Sie das CSS, bevor Sie die Seite verlassen, denn beim Neuladen beginnt alles wieder mit dem Standardschatten.
Quellen
Zahlen und Text zuletzt geprüft: Dienstag, 10. November 2026.