Erstellen Sie beeindruckende lineare, radiale und konische Verläufe mit einem visuellen Editor. Fügen Sie mehrere Farbstopps hinzu und generieren Sie sofort CSS-Code.
Wählen Sie linear, radial oder konisch über die Verlaufstyp-Buttons. Die Live-Vorschau aktualisiert sich sofort.
Verwenden Sie die Farbwähler und Positionsschieberegler, um Ihre Farben festzulegen. Klicken Sie auf 'Stopp hinzufügen' für weitere Farben oder auf das Papierkorbsymbol zum Entfernen. Sortieren Sie Stopps mit den Auf/Ab-Pfeilen um.
Ziehen Sie für lineare und konische Verläufe den Winkelregler (0°–360°), um die Verlaufsrichtung zu steuern. Radiale Verläufe verwenden keinen Winkel.
Klicken Sie auf 'CSS kopieren', um die background-Eigenschaft in die Zwischenablage zu kopieren, oder exportieren Sie den Verlauf als SVG-Datei. Sie können auch die Teilen-Buttons nutzen, um einen Link zu senden, der Ihren Verlauf reproduziert.
Klicken Sie auf 'Zufällig' für einen zufälligen Zweifarbverlauf mit zufälligem Winkel oder auf 'Löschen', um alles auf die Standardeinstellungen zurückzusetzen.
Jeder Farbstopp definiert eine Farbe und eine Position von 0% bis 100%. Der Browser berechnet sanfte Übergänge zwischen benachbarten Stopps gemäß der CSS-Gradient-Spezifikation. Sie können beliebig viele Stopps hinzufügen, um komplexe Mehrfarbeneffekte zu erzeugen.
Das Tool erzeugt einen CSS linear-gradient() mit dem gewählten Winkel. Farben werden entlang einer geraden Linie vom Startpunkt zum Endpunkt gemischt. Änderungen am Winkel drehen die Richtung des Verlaufs.
Radiale Verläufe verwenden radial-gradient(circle) für kreisförmige Farbübergänge von der Mitte nach außen. Konische Verläufe verwenden conic-gradient(), um Farben um einen Mittelpunkt zu drehen, beginnend beim eingestellten Winkel — nützlich für Kreisdiagramme, Farbräder und dekorative Effekte.
Beim Export als SVG werden Ihre Farbstopps in SVG-Gradient-Elemente (linearGradient oder radialGradient) umgewandelt und in eine eigenständige SVG-Datei verpackt, die in Design-Tools oder Webseiten eingebettet werden kann.
Ihr Verlaufstyp, Winkel und Farbstopps werden in die Seiten-URL kodiert. Das Teilen dieser URL ermöglicht es jedem, genau denselben Verlauf in seinem Browser zu öffnen, ohne ihn manuell nachbauen zu müssen.
Sie können drei Typen erstellen: Lineare Verläufe, die Farben entlang einer geraden Linie mischen, radiale Verläufe, die kreisförmig von einem Mittelpunkt nach außen strahlen, und konische Verläufe, die Farben wie ein Farbrad um einen Mittelpunkt drehen.
Gespeicherte Voreinstellungen ist eine Supporter-Funktion.
Werkzeugverlauf ist eine Supporter-Funktion.
Werkzeug-Notizen ist eine Supporter-Funktion.
