CSS-Box-Schatten mit Live-Vorschau erstellen. Mehrere Schattenebenen für Tiefe hinzufügen, dann CSS kopieren.
Ziehen Sie Regler für horizontalen Versatz, vertikalen Versatz, Unschärferadius, Ausbreitung, Farbe und Opazität eines CSS-Box-Schattens. Aktivieren Sie Inset für einen inneren Schatteneffekt. Die Vorschau aktualisiert sich live.
Verwenden Sie die Regler für jeden Schattenparameter. Aktivieren Sie Inset für einen inneren Schatten. Klicken Sie auf das Farbfeld, um die Schattenfarbe zu ändern. Das generierte CSS aktualisiert sich live im dunklen Codeblock – klicken Sie auf Kopieren.
Ausbreitung erweitert (positiver Wert) oder verkleinert (negativer Wert) den Schatten, bevor die Unschärfe angewendet wird. Ein positiver Wert macht den Schatten größer als das Element.
CSS unterstützt mehrere Box-Schatten als kommagetrennte Liste. Erstellen Sie jeden Schatten hier separat und kombinieren Sie sie manuell: box-shadow: schatten1, schatten2;
Dieses Werkzeug läuft vollständig in Ihrem Browser. Nichts, was Sie eingeben oder einfügen, wird an einen Server gesendet — die gesamte Verarbeitung erfolgt lokal auf Ihrem Gerät.