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.
Schatten gehören zu den schnellsten Mitteln, um einer Nutzerin oder einem Nutzer zu zeigen, was über der Seite liegt, was gedrückt werden kann und was sich vom Hintergrund abheben soll. In der Praxis geht es nicht darum, box-shadow-Syntax auswendig zu schreiben. Es geht darum, eine Tiefenwirkung zu finden, die zum Element, zum Hintergrund und zum restlichen Interface passt.
Dieses Tool macht diese Suche zu einem sichtbaren Abstimmungsprozess statt zu Rätselraten anhand roher Zahlen.
Dieses Tool ist nützlich, weil es diesen Versuch-und-Irrtum-Prozess sichtbar macht.
Ein gut dosierter Schatten kann eine Fläche gerade genug vom Hintergrund lösen, damit sie als eigene Ebene lesbar wird.
Manche Controls brauchen Tiefe, um aktivierbar zu wirken. Zu wenig und sie sehen flach aus, zu viel und sie wirken schwer oder veraltet.
Schwebende UI braucht visuelle Trennung vom Inhalt dahinter. Schatten sind einer der einfachsten Wege, diese Abgrenzung zu schaffen.
Wenn eine Komponente einen riesigen Schatten braucht, um wahrgenommen zu werden, ist das oft eher ein Hierarchieproblem als ein Schattenproblem.
Schwere Schatten machen ein Interface schnell trüb. Kleine Erhöhungen wirken oft stärker, als man erwartet.
Ein Schatten, der auf einer weißen Seite gut funktioniert, kann auf einer dunklen oder unruhigen Fläche völlig falsch wirken.
Das ist ein guter Anwendungsfall, weil kleine visuelle Unterschiede zählen und meist etwas Subtileres gebraucht wird, als man aus dem Kopf schreiben würde.
Inset-Schatten sind nützlich, wenn ein Feld oder Control vertieft statt angehoben wirken soll.
Wenn ein Team bereits mit einem bestimmten Schattenstil arbeitet, erleichtert ein Generator das exakte Nachbilden und Wiederverwenden statt bloßes Augenmaß.
Dieses Tool erzeugt Schatten-CSS. Es entscheidet nicht, ob eine Komponente auf eine höhere Ebene gehört, ob das gesamte Designsystem ausgewogen ist oder ob der Effekt überall passt. Es hilft beim Schatten selbst, nicht bei der gesamten UI-Hierarchie.
Schatten sind eines dieser Details, die Menschen erst bemerken, wenn sie sich falsch anfühlen. Ein Generator hilft, schneller zu „fühlt sich richtig an“ zu kommen und willkürliches Tuning zu vermeiden.
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.