Die Eigenschaft box-shadow erwartet fünf Werte in fester Reihenfolge, und der Unterschied zwischen Weichzeichnung und Ausbreitung ist aus der Syntax allein nicht ersichtlich. Dieser Generator bietet Regler und eine Live-Vorschau, mit denen Sie den Schatten anpassen, bis er natürlich wirkt, und anschließend das CSS kopieren.
Die Weichzeichnung macht die Schattenkante weicher, ohne die Größe zu ändern. Die Ausbreitung vergrößert oder verkleinert die Form vor dem Weichzeichnen – eine negative Ausbreitung mit starker Weichzeichnung ergibt einen dezenten, eng anliegenden Schatten.
Durch zwei oder drei übereinandergelegte Schatten: ein kurzer, dunklerer nah am Element plus ein breiter, blasser weiter außen bildet echtes Licht deutlich besser ab als ein einzelner kräftiger Schatten. Erzeugen Sie jede Ebene hier und fügen Sie sie mit Kommas zusammen.
Für Elemente, die vertieft wirken sollen: gedrückte Schaltflächen, Formularfelder und eingelassene Flächen. Der Schatten wird innerhalb des Rahmens gezeichnet statt außerhalb.
Große Weichzeichnungsradien auf vielen Elementen kosten Zeichenzeit, besonders beim Scrollen. Wenn es hakt, verringern Sie den Radius oder heben das Element auf eine eigene Ebene.
JSON-Formatierer · Base64-Konverter · URL-Kodierer · JWT-Decoder · Alle Tools ansehen
Auch verfügbar auf: English · Español · Português · Français