Wählen Sie linear, radial oder konisch, stellen Sie den Winkel ein und bearbeiten Sie jeden Stopp: die Vorschau malt dieselbe Deklaration, die das Ausgabefeld ausgibt. Positionen bleiben zwischen 0 und 100 Prozent, der Winkel zwischen 0 und 360 Grad, die Werkbank nimmt zwei bis acht Stopps.
Läuft lokal in deinem BrowserDie Werkbank startet als linear-gradient(135deg, #0f9d66 0%, #2d5bff 55%, #7c3aed 100%). Die Vorschau malt diese Deklaration und das Ausgabefeld druckt sie, der kopierte Code ist also der Verlauf, den Sie gerade gesehen haben.
Jedes Bedienelement hat eine gemessene Grenze: der Winkel liegt zwischen 0 und 360 Grad, Stopp-Positionen zwischen 0 und 100 Prozent, die Stopp-Liste zwischen zwei und acht Einträgen. Ein Wert außerhalb wird beim Verlassen des Feldes auf die Grenze zurückgeschrieben, statt still in die Vorschau zu wandern.
Drei Stopps, 135 Grad, linear: damit lädt die Seite, und das stellt Zurücksetzen wieder her. Die Ausgabe ist eine einzige Deklaration, .gradient-background { background: … ; }, nach Position sortiert — ein zwischen 0 und 55 eingefügter Stopp steht vor der 55, obwohl er zuletzt hinzukam.
Den Winkel gibt es nur bei linear-gradient() und conic-gradient(). Konisch druckt ihn als from 90deg at center, radial druckt circle at center ohne Winkel. Positionen erscheinen mit einer Nachkommastelle, derselben Genauigkeit, die das Feld nach dem Übernehmen zeigt.
Ein Verlauf braucht mindestens zwei Stopps: bei zwei meldet der ×-Knopf, dass mindestens zwei Farbstopps nötig sind, statt einen zu entfernen. Acht ist die Obergrenze — bei acht Stopps ist Farbe hinzufügen deaktiviert, die Grenze ist also sichtbar statt ein Klick ohne Wirkung.
Hinzufügen nutzt die größte Lücke zwischen den vorhandenen Stopps und hält den Verlauf gleichmäßig: vier Stopps werden aus der Voreinstellung 0, 28, 55 und 100 Prozent, die vollen acht 0, 14, 28, 42, 55, 67, 78 und 100. Farben umkehren spiegelt jede Position (100 minus Position) und dreht die Liste; die ausgegebene Deklaration ist danach immer nach Position sortiert.
Stopp-Farben sind sechsstellige HEX-Werte oder der Farbwähler. Die dreistellige Kurzform wie #fff wird nicht erweitert — die Seite behält den letzten gültigen Verlauf und fragt nach sechs Stellen — und hsl() oder rgba() in einem HEX-Feld werden genauso abgelehnt.
Es gibt keinen Bild-, SVG- oder PNG-Export, keinen Regler für Deckkraft oder Interpolationshinweis, keine zweite Verlaufsebene und keine Vorschau im eigenen Container. Die aus dem Ausgabefeld kopierte Deklaration ist das ganze Ergebnis.