Verlaufsgenerator

Lineare, radiale und konische Verläufe gestalten und als CSS oder Bild exportieren

Dateien verlassen Ihr Gerät nicht
Läuft im Browser
Kostenlos, ohne Anmeldung, ohne Wasserzeichen

Farbstopps

Klicken Sie auf die Leiste, um einen Stopp hinzuzufügen. Griffe ziehen, Pfeiltasten verschieben, Entf löscht.

Code

background: linear-gradient(135deg, #4f46e5 0%, #5d45e5 3.13%, #6a44e5 6.25%, #7643e3 9.38%, #8243e1 12.5%, #8d42de 15.63%, #9742db 18.75%, #a141d6 21.88%, #ab41d1 25%, #b541cc 28.13%, #be42c6 31.25%, #c642bf 34.38%, #cf42b8 37.5%, #d743b1 40.63%, #de44a9 43.75%, #e546a1 46.88%, #ec4899 50%, #f14b90 53.13%, #f54e87 56.25%, #f8527e 59.38%, #fb5775 62.5%, #fe5b6c 65.63%, #ff6063 68.75%, #ff665a 71.88%, #ff6c51 75%, #ff7247 78.13%, #ff783e 81.25%, #ff7e35 84.38%, #ff842b 87.5%, #fd8b21 90.63%, #fb9118 93.75%, #f89810 96.88%, #f59e0b 100%);
background: linear-gradient(in oklch 135deg, #4f46e5 0%, #ec4899 50%, #f59e0b 100%);

Die erste Zeile ist ein Fallback mit vorberechneten Stopps für Browser ohne „in oklab/oklch“.

So verwenden Sie: Verlaufsgenerator

Erstellen Sie lineare, radiale und konische Verläufe mit beliebig vielen Farbstopps, gemischt in sRGB, OKLab oder OKLCH. Kopieren Sie das Ergebnis als CSS, Tailwind-Klasse oder SVG oder laden Sie es als PNG, JPG oder WebP mit bis zu 8192 px Kantenlänge herunter.

Wählen Sie den „Typ“ (Linear, Radial oder Konisch) und stellen Sie „Winkel“, „Form“ oder Mittelpunkt ein; bei radialen und konischen Verläufen ziehen Sie den Mittelpunkt direkt in der Vorschau.

Bearbeiten Sie die „Farbstopps“: Ein Klick auf den Balken fügt einen Stopp hinzu, Griffe lassen sich ziehen, und in der Liste ändern Sie Farbe und Position.

Wählen Sie unter „Farben mischen in“ sRGB, OKLab oder OKLCH, oder starten Sie mit „Vorlagen“ bzw. „Zufall“.

Kopieren Sie den Code aus dem Tab CSS, Tailwind oder SVG.

Für ein Bild legen Sie „Breite“ und „Höhe“ fest oder wählen eine Größe, entscheiden sich für PNG, JPG oder WebP und klicken auf Herunterladen.

Häufige Fragen

Was unterscheidet sRGB-, OKLab- und OKLCH-Mischung?

sRGB ist die klassische CSS-Mischung, bei der Komplementärfarben in der Mitte grau werden können. OKLab ist wahrnehmungsgleichmäßig und vermeidet trübe Mitten. OKLCH wandert über den Farbkreis und hält die Farben kräftig.

Funktionieren OKLab- und OKLCH-Verläufe in älteren Browsern?

Die CSS-Ausgabe beginnt mit einer Fallback-Zeile aus vorberechneten Stopps für Browser ohne „in oklab/oklch“. SVG-Code und heruntergeladene Bilder nutzen ebenfalls vorberechnete Stopps und sehen daher überall gleich aus.

Warum ist der SVG-Tab bei konischen Verläufen deaktiviert?

SVG kennt keine konischen Verläufe. Laden Sie stattdessen ein PNG-, JPG- oder WebP-Bild herunter.

Kann ich transparente Stopps verwenden?

Ja, Farben mit Alphakanal wie rgba() oder #rrggbbaa funktionieren. Für erhaltene Transparenz laden Sie PNG oder WebP herunter, denn JPG hat keinen Alphakanal.

Wird das Bild auf einem Server erzeugt?

Nein. Es wird im Browser auf einem Canvas gezeichnet und direkt gespeichert, mit 1 bis 8192 px pro Seite.

Wie justiere ich einen Stopp per Tastatur?

Fokussieren Sie einen Griff und verschieben Sie ihn mit den Pfeiltasten um 1 % (mit Umschalt um 10 %), mit Pos1 und Ende an die Ränder, mit Entf entfernen Sie ihn. Ein Verlauf behält immer mindestens zwei Stopps.

So verwenden Sie: Verlaufsgenerator

Bearbeiten Sie die „Farbstopps“: Ein Klick auf den Balken fügt einen Stopp hinzu, Griffe lassen sich ziehen, und in der Liste ändern Sie Farbe und Position.

Wählen Sie unter „Farben mischen in“ sRGB, OKLab oder OKLCH, oder starten Sie mit „Vorlagen“ bzw. „Zufall“.

Kopieren Sie den Code aus dem Tab CSS, Tailwind oder SVG.

Für ein Bild legen Sie „Breite“ und „Höhe“ fest oder wählen eine Größe, entscheiden sich für PNG, JPG oder WebP und klicken auf Herunterladen.

Häufige Fragen

Was unterscheidet sRGB-, OKLab- und OKLCH-Mischung?

Funktionieren OKLab- und OKLCH-Verläufe in älteren Browsern?

Warum ist der SVG-Tab bei konischen Verläufen deaktiviert?

SVG kennt keine konischen Verläufe. Laden Sie stattdessen ein PNG-, JPG- oder WebP-Bild herunter.

Kann ich transparente Stopps verwenden?

Ja, Farben mit Alphakanal wie rgba() oder #rrggbbaa funktionieren. Für erhaltene Transparenz laden Sie PNG oder WebP herunter, denn JPG hat keinen Alphakanal.

Wird das Bild auf einem Server erzeugt?

Nein. Es wird im Browser auf einem Canvas gezeichnet und direkt gespeichert, mit 1 bis 8192 px pro Seite.