Kategorie: Entwicklung
CSS-Box-Shadow-Generator
Einen box-shadow entwerfen und das CSS kopieren
Stellen Sie Versatz, Weichzeichnung, Ausbreitung, Farbe und Deckkraft ein, sehen Sie die Vorschau live und kopieren Sie eine fertige box-shadow-Deklaration. Alles zeichnet Ihr eigener Browser.
box-shadow: 0px 8px 24px -4px rgba(23, 33, 28, 0.24);
Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.
Wozu dieses Werkzeug dient
box-shadow nimmt fünf Werte in fester Reihenfolge, und kleine Änderungen an einem davon wirken auf dem Bildschirm sehr verschieden — blind zu schreiben ist deshalb unangenehm. Dieses Werkzeug zeichnet die echte Deklaration auf ein Vorschaufeld, während Sie die Regler bewegen. Eine zweite, engere Kontaktebene lässt sich zuschalten — die Kombination, mit der Designer ein Element angehoben statt verschwommen wirken lassen — und der Innenschatten kehrt den Schatten nach innen, für eingedrückte Flächen.
So funktioniert es
- Stellen Sie horizontalen und vertikalen Versatz, Weichzeichnung und Ausbreitung ein.
- Wählen Sie Farbe und Deckkraft und schalten Sie bei Bedarf Innenschatten oder Kontaktebene zu.
- Kopieren Sie die box-shadow-Deklaration in Ihr Stylesheet.
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 CSS-Schatten, den Ihr Browser malt, und die Deklaration wird in der Seite zusammengesetzt.
- Was macht die Ausbreitung?
- Die Ausbreitung vergrößert oder verkleinert den Schatten, bevor er weichgezeichnet wird. Ein negativer Wert zieht ihn zusammen — so verhindert man, dass ein weicher Schatten seitlich unter dem Element hervorquillt.
- Warum zwei Ebenen?
- Ein einzelner breiter, weicher Schatten wirkt schnell wie Nebel. Eine kleine, dunklere Ebene dicht am Element gibt ihm eine Kontaktkante, und beide zusammen lesen sich als Höhe.