CSS-Box-Shadow-Generator
Erstellen Sie CSS-box-shadow-Eigenschaften visuell mit Schiebereglern. Sehen Sie eine Live-Vorschau und kopieren Sie den CSS-Code. Mehrere Schatten können überlagert werden.
Funktionen
Anleitung
1. Den Schatten mit den Reglern formen — die neutrale Karte auf der Fläche zeigt genau das Endergebnis.
2. Echte Schatten sind mehrschichtig: bis zu vier Ebenen stapeln oder mit einer Vorlage (Weich, Erhöht, Schwebend, Innen) starten.
3. Die Arbeitsfläche umschalten, um den Schatten auf Weiß, Grau und Dunkel zu prüfen, dann das CSS kopieren.
Über dieses Werkzeug
Überzeugende Schatten in Oberflächen bestehen meist aus mehr als einer Ebene: einem engen, dunkleren Schatten für den Kontakt und einem breiten, weichen für die Distanz. Mit diesem Generator stapeln Sie bis zu vier box-shadow-Ebenen und stellen für jede den horizontalen und vertikalen Versatz, Unschärfe, Ausdehnung, Farbe, Deckkraft und Innenschatten ein, während eine neutrale Karte auf der Bühne das genaue Ergebnis zeigt. Vorlagen liefern Ausgangspunkte – Weich, Erhöht, Schwebend und Innen –, und Sie können die Bühne zwischen weißen, grauen und dunklen Flächen umschalten, um zu prüfen, ob der Schatten überall wirkt. Das erzeugte CSS listet die Ebenen in der richtigen Reihenfolge mit rgba-Farben auf, fertig zum Einfügen in ein Stylesheet oder eine Design-Token-Datei.