Kategorie: Entwicklung
CSS-Mehrschicht-Box-Shadow-Generator
Einen geschichteten box-shadow mit einem Reglersatz gestalten
Versatz, Unschärfe, Ausbreitung, Farbe und Anzahl der Ebenen festlegen, eine Live-Vorschau beobachten und eine mehrschichtige box-shadow-Deklaration kopieren, so gebaut, wie Designer Schatten für echte Tiefe stapeln. Alles wird in Ihrem eigenen Browser gerendert.
box-shadow: 0px 4px 6px -1px rgba(23, 33, 28, 0.3), 0px 8px 12px -2px rgba(23, 33, 28, 0.26), 0px 12px 18px -2px rgba(23, 33, 28, 0.22), 0px 16px 24px -3px rgba(23, 33, 28, 0.18), 0px 20px 30px -4px rgba(23, 33, 28, 0.14);
Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.
Wozu dieses Werkzeug dient
Eine einzelne box-shadow-Ebene wirkt oft wie flacher Nebel; echte Erhabenheit entsteht durch das Stapeln mehrerer Ebenen, die sich zum Element hin verkleinern und abschwächen, ähnlich wie Umgebungslicht abfällt. Dieses Tool nimmt einen Reglersatz aus Versatz, Unschärfe, Ausbreitung und Farbe sowie eine Ebenenanzahl und leitet daraus automatisch entsprechend viele zunehmend engere, deckendere Ebenen ab, sodass Sie einen überzeugenden gestapelten Schatten erhalten, ohne jede Ebene von Hand abzustimmen.
So funktioniert es
- Wählen, wie viele Ebenen erzeugt werden sollen.
- Versatz, Unschärfe, Ausbreitung, Farbe und Deckkraft der Basisebene festlegen.
- Die erzeugte mehrschichtige box-shadow-Deklaration kopieren.
Datenschutz
Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.
Häufig gestellte Fragen
- Wird etwas hochgeladen?
- Nein. Die Vorschau ist ein von Ihrem Browser gezeichneter CSS-Schatten, und die Deklaration wird in der Seite zusammengesetzt.
- Wie werden die einzelnen Ebenen abgeleitet?
- Jede Ebene skaliert Versatz, Unschärfe und Ausbreitung zum Element hin nach unten und nimmt an Deckkraft zu, je näher sie kommt — dasselbe Schrumpf-und-Abschwäch-Muster, das in handgebauten Erhabenheitssystemen verwendet wird.
- Warum ist die Ebenenanzahl begrenzt?
- Ab etwa fünf oder sechs Ebenen wird der visuelle Unterschied vernachlässigbar, während das CSS weiter wächst, daher ist der Regler begrenzt, um die Ausgabe leicht lesbar und einfügbar zu halten.