CSS-Verlaufs- & Schatten-Generator
Verläufe und Box-Schatten mit Vorschau erstellen und dann den CSS-Code kopieren.
Verlauf
Sie können 2 bis 5 Stopps verwenden; sie werden nach Position aufsteigend sortiert ausgegeben.
Vorschau
Erzeugtes CSS
Box-Schatten
Sie können bis zu 4 Schattenebenen verwenden.
Vorschau
Erzeugtes CSS
So verwenden Sie den CSS-Verlaufs- & Schatten-Generator
Vorschau und CSS-Code werden aktualisiert, sobald Sie einen Wert ändern. Wenn Ihnen das Ergebnis gefällt, drücken Sie CSS kopieren und fügen Sie es in Ihr Stylesheet ein.
Einschränkungen
- Farben akzeptieren nur Hex in der Form #RGB, #RGBA, #RRGGBB oder #RRGGBBAA, und das führende # darf weggelassen werden.
- Zahlen außerhalb des Bereichs werden auf den nächsten zulässigen Wert gesetzt. Der Winkel reicht von 0 bis 360, Position und Deckkraft von 0 bis 100, Versatz und Ausbreitung von -200 bis 200 und die Weichzeichnung von 0 bis 200.
- Zahlen werden bis zu 2 Dezimalstellen verwendet.
- Radiale Verläufe sind immer Kreise, die sich von der Mitte aus ausbreiten.
Häufige Fragen
Wird meine Eingabe an einen Server gesendet?
Nein. Alles wird in diesem Browser berechnet, und Ihre Eingaben und Ergebnisse werden weder gespeichert noch hochgeladen. Beim Neuladen kehren die Startwerte zurück.
Ändert eine andere Reihenfolge der Stopps das Ergebnis?
Das ausgegebene CSS ist immer ab der niedrigsten Position sortiert. Stopps an derselben Position behalten die von Ihnen eingegebene Reihenfolge.
Wie wird die Deckkraft angewendet?
Hat die Schattenfarbe in einem 8-stelligen Hex einen Alphawert, wird er mit der Deckkraft (%) multipliziert und als rgba() ausgegeben. Ist sie nicht transparent, wird sie als 6-stelliges Hex ausgegeben.