Kostenloser Online-CSS-Box-Shadow-Generator. Versatz, Unschärfe, Ausbreitung und Farbe anpassen mit Live-Vorschau. Code kopieren. Im Browser.
Drücke Ctrl+D, um diese Seite als Lesezeichen zu speichern
Der CSS Box-Shadow-Generator ist ein kostenloses Online-Tool zur visuellen Bearbeitung der box-shadow-Eigenschaft.
Ja, Sie können mehrere Schatten für komplexe Tiefeneffekte hinzufügen. Jeder Schatten kann einzeln angepasst werden.
Ein Inset-Schatten erscheint innerhalb des Elements statt außerhalb. Während normaler box-shadow außen erscheint, erzeugt inset einen eingedrückten Effekt.
Echte Schatten sind nicht schwarz, sondern eine abgedunkelte Version der Hintergrundfarbe, und sie werden zu den Rändern hin weicher. Statt eines kräftigen Schattens mit 30 % Schwarz stapeln Sie zwei oder drei sehr blasse Lagen mit verschiedenen Weichzeichnungsradien – etwa 1 px dicht an der Kante, 8 px dahinter und sehr zart 24 px weiter außen. Nehmen Sie Licht von oben an: Geben Sie nur einen vertikalen Versatz und lassen Sie den horizontalen bei null.
Im statischen Layout fällt der Aufwand kaum ins Gewicht, doch sobald animiert wird, ändert sich das. Wer den box-shadow-Wert beim Überfahren überblendet, zwingt den Browser, die Unschärfe in jedem Frame neu zu berechnen – auf schwächeren Geräten ruckelt das sichtbar. Soll der Schatten bei Interaktion wachsen, animieren Sie stattdessen Deckkraft oder Transform einer bereits gezeichneten Schattenebene; das läuft deutlich flüssiger.