Box-Shadow-Generator
Stellen Sie Versatz, Unschärfe und Ausdehnung mit Reglern ein und kopieren Sie die box-shadow-Zeile.
CSS
CSS-Box-Schatten online erstellen
Schatten heben Karten, Buttons und Menüs von der Seite ab. Diese Seite öffnet den CSS-Generator auf seinem Reiter für Box-Schatten, sodass Sie den Schatten an einer Vorschau feinjustieren, statt Zahlen zu ändern und neu zu laden.
Häufige Schatten
| CSS | Einsatz |
|---|---|
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2); | Feiner Schatten für Karten und Eingabefelder |
box-shadow: 0px 12px 32px -8px rgba(30, 27, 75, 0.35); | Weich schwebende Karte |
box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1); | Harter versetzter Schatten im Flat-Stil |
box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.25); | Eingedrücktes Feld oder eingedrückter Button |
Performance
Große, weichgezeichnete Schatten kosten Zeichenzeit, vor allem wenn sie animiert werden. Um einen Schatten beim Hover zu animieren, legt man ihn gern auf ein Pseudo-Element und animiert dessen Deckkraft statt des Schattens selbst.
Verwandte Werkzeuge
Um dasselbe Element abzurunden, siehe den Border-Radius-Generator; der Schatten folgt den abgerundeten Ecken. Für einen Hintergrund siehe den CSS-Farbverlauf-Generator.