Gradient Generator

Überblick

Der WPT Gradient Generator ist ein browserbasiertes Tool zum Erstellen glatter, wahrnehmungsgenauer CSS-Gradienten mit dem OKLCH-Farbraum. Im Unterschied zu normalen RGB- oder HSL-Verläufen interpoliert OKLCH so, dass Helligkeit und Sättigung über den gesamten Übergang konsistent bleiben. Dadurch vermeidet der Generator stumpfe oder ausgewaschene Zwischenbereiche, die bei regulären CSS-Gradienten oft entstehen.

Der Generator gibt eine sofort einfügbares background-image: linear-gradient()-CSS-Regel aus, inklusive fest eingerechneter Zwischen-Farbstopps. So rendert der Verlauf auch in Browsern korrekt, die native OKLCH-Interpolation noch nicht unterstützen.

Interface-Überblick

Das Tool ist in zwei Spalten unterteilt. Die linke Spalte enthält alle Bedienelemente. Die rechte Spalte zeigt eine Live-Vorschau deines Gradienten, die sich in Echtzeit aktualisiert.

Farbstopps

Farbstopps definieren die Farben, zwischen denen dein Gradient übergeht. Du kannst zwischen 2 und 5 Stops haben.

Stops hinzufügen und entfernen

• Klicke auf die +-Schaltfläche, um einen neuen Farbstop hinzuzufügen (bis zu 5).

• Klicke auf das kleine ✕ unter einer Farbkachel, um sie zu entfernen (mindestens 2 Stops erforderlich).

Eine Farbe bearbeiten

Klicke auf eine beliebige Farbkachel, um das Farbauswahl-Popover zu öffnen. Es enthält drei Bedienelemente:

• Hex-Eingabe — gib einen gültigen Hex-Farbwert ein, z. B. #FF0000, und drücke Enter, um ihn direkt anzuwenden.

• Sättigungs-/Helligkeits-Canvas — klicke oder ziehe innerhalb des Quadrats, um den exakten Farbton zu wählen. Die horizontale Achse steuert die Sättigung (links = entsättigt, rechts = voll gesättigt), die vertikale Achse die Helligkeit (oben = hell, unten = dunkel).

• Farbtonregler — ziehe den runden Griff entlang des Regenbogenbalkens, um den Farbton zu ändern. Die Griff-Farbe zeigt den aktuell ausgewählten Farbton.

Klicke außerhalb des Popovers, um es zu schließen.

Opacity (nur erster und letzter Stop)

Der erste und der letzte Farbstop haben unter ihrer Farbkachel ein kleines Opacity-Eingabefeld. Gib einen Wert zwischen 0 und 100 ein, um festzulegen, wie transparent dieser Stop ist.

• 100 = vollständig deckend (Standard)

• 0 = vollständig transparent

Das ist besonders nützlich für Rand-Gradienten, die an den Kanten ein- oder auslaufen, oder für Überlagerungen auf Bildern. Die Opacity wird als /-Alpha-Syntax in OKLCH ausgegeben — zum Beispiel oklch(65% 0.2 30 / 0.5) für 50 % Transparenz.

Gib zuerst die erste Ziffer ein und tippe dann die zweite weiter — das Feld bleibt fokussiert, bis du irgendwo anders klickst oder Enter drückst.

Smoothness

Der Smoothness-Regler steuert, wie viele Zwischen-Farbstopps in die CSS-Ausgabe eingebrannt werden. Der Bereich liegt zwischen 1 und 20.

• Niedrige Werte (1–4) erzeugen weniger Stops und einfacheres CSS, können aber sichtbare Banding-Effekte oder ungleichmäßige Übergänge verursachen, besonders bei großen Farbtonwechseln.

• Hohe Werte (12–20) erzeugen mehr Stops und glattere Übergänge, aber eine ausführlichere CSS-Ausgabe.

Ein Wert von 8 ist für die meisten Verläufe ein guter Standard. Erhöhe den Wert, wenn der Verlauf in der Vorschau abgestuft oder ungleichmäßig wirkt.

Hinweis: Die Live-Vorschau wird unabhängig von dieser Einstellung immer glatt gerendert. Der Smoothness-Wert beeinflusst nur die CSS-Ausgabe.

Angle

Die Angle-Steuerung legt die Richtung des Gradienten fest.

Dial

Klicke und ziehe den Griff auf dem runden Dial, um die Verlaufsrichtung zu drehen. Die Linie zeigt in die Richtung, in die der Gradient verläuft.

Number input

Gib einen Wert direkt in das Winkel-Eingabefeld (neben der Dial-Beschriftung) ein, um die Richtung präzise zu steuern. Akzeptiert Werte von 0 bis 360. Drücke Enter oder klicke außerhalb, um zu bestätigen. Werte außerhalb des Bereichs werden automatisch umgebrochen.

Gängige Werte:

• 0° = von oben nach unten

• 90° = von links nach rechts

• 135° = diagonal von oben links nach unten rechts

• 180° = von unten nach oben

Easing Curve

Die Easing Curve steuert, wie sich der Farbverlauf über die Fläche verteilt — ob er mit konstanter Geschwindigkeit läuft oder beschleunigt bzw. abbremst.

Curve canvas

Das Canvas zeigt eine kubische Bézier-Kurve. Die beiden cyanfarbenen Griffe lassen sich ziehen, um die Kurve anzupassen:

• Eine gerade diagonale Linie = linearer, gleichmäßiger Übergang (Standard)

• Eine Kurve, die steil ansteigt und dann abflacht = der Übergang passiert am Anfang schnell und wird dann langsamer

• Eine Kurve, die flach startet und dann steil ansteigt = langsamer Start, schneller Abschluss

Die gestrichelten Hilfslinien zeigen die Kontrollarme, die jeden Griff mit den festen Start- und Endpunkten verbinden.

Preset buttons

Vier Preset-Kurven stehen als Schnellwahl zur Verfügung:

Wenn du ein Preset auswählst, springen die Griffe in diese Kurve. Wenn du einen Griff manuell verschiebst, wird das aktive Preset deaktiviert.

CSS Output

Das CSS output-Feld unten in der linken Spalte zeigt die sofort verwendbare CSS-Regel. Es aktualisiert sich live, sobald du eine Steuerung änderst.

Die Ausgabe verwendet oklch()-Farbwerte mit fest eingebauten Zwischenstops (die Anzahl wird durch die Smoothness-Einstellung bestimmt) und verpackt alles in einer .gradient-Regel:

.gradient {
  background-image: linear-gradient(
    90deg,
    oklch(88.3% 0.181 94) 0%,
    oklch(71.0% 0.186 47) 50%,
    oklch(42.1% 0.193 332) 100%
  );
}

Ersetze .gradient vor dem Einfügen in dein Stylesheet durch deinen eigenen Selektor.

Copy button

Klicke unten rechts im Output-Feld auf copy, um die vollständige CSS-Regel in die Zwischenablage zu kopieren. Der Button zeigt kurz copied! an, um die Aktion zu bestätigen.

Browser Support

Das Tool verwendet die oklch()-Farbfunktion in der CSS-Ausgabe. Browserunterstützung:

Für ältere Browser solltest du über der oklch-Regel eine Standard-rgb()-Fallback-background-image-Regel in dein Stylesheet setzen.