CSS-Schatten-Generator
CSS box-shadow mit Live-Vorschau erstellen.
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.15);Was ist box-shadow in CSS?
Die CSS-Eigenschaft box-shadow ermöglicht es, jedem HTML-Element Schatten hinzuzufügen. Sie ist eines der am häufigsten verwendeten Werkzeuge im Webdesign, um Tiefe, Erhebung und visuelle Hierarchie zu erzeugen. Gut angewendete Schatten lassen Elemente über der Seite 'schweben'.
Die Syntax umfasst: horizontalen Versatz (X), vertikalen Versatz (Y), Unschärferadius (blur), Ausbreitungsradius (spread), Farbe und optional 'inset' für innere Schatten. Sie können mehrere Schatten kombinieren, indem Sie sie durch Kommas trennen.
Häufig gestellte Fragen
Was ist die inset-Eigenschaft?
Inset verwandelt den äußeren Schatten in einen inneren Schatten. Es ist nützlich, um Tiefeneffekte, eingelassene Textfelder oder gedrückte Schaltflächen zu erzeugen.
Beeinflussen Schatten die Leistung?
Einfache Schatten haben minimale Auswirkungen. Allerdings können Schatten mit sehr hoher Unschärfe auf vielen Elementen die Leistung auf langsamen Geräten beeinträchtigen. Verwenden Sie sie sparsam.
Kann ich mehrere Schatten verwenden?
Ja, trennen Sie sie mit Kommas: box-shadow: 2px 2px 5px rgba(0,0,0,0.1), 0 0 20px rgba(0,0,0,0.05). Dies erzeugt realistischere und anspruchsvollere Effekte.
Mehr erfahren? Lesen Sie unseren vollständigen Leitfaden →