Neu im Farbkonverter: eigenständiger CSS-Verlaufsgenerator mit Tailwind-Code
Der Farbkonverter hat ein neues Modul bekommen: einen eigenständigen CSS-Verlaufsgenerator. Statt einen Verlauf wie bisher manuell aus Palettenfarben zusammenzusetzen, wählst du jetzt direkt auf derselben Seite Farbstopps, Typ und Winkel — und bekommst fertigen CSS- und Tailwind-Code zum Kopieren. Dieser Beitrag zeigt, was genau neu ist und wie du es nutzt.
Kurzantwort Der Farbkonverter enthält jetzt ein eigenständiges Verlaufs-Modul: 2 bis 3 Farbstopps, wählbar zwischen linear und radial, mit Live-Vorschau und direkt kopierbarem CSS- sowie Tailwind-Arbitrary-Value-Code — ohne separates Tool oder externe Bibliothek.
Bisher ließ sich ein Verlauf nur indirekt bauen: Man nahm zwei oder drei HEX-Werte aus dem Palettengenerator und tippte den linear-gradient()-Code von Hand zusammen. Das neue Modul auf derselben Seite übernimmt diesen letzten Schritt. Du legst die Farbstopps direkt fest, wählst Verlaufstyp und Winkel, und siehst sofort eine Live-Vorschau, wie der Verlauf tatsächlich aussieht — bevor überhaupt Code kopiert wird.
Warum das praktisch istWer schnell einen Hero-Hintergrund, einen Button-Verlauf oder eine Kartenkopfzeile braucht, muss keine Werte mehr zwischen zwei Tools hin- und herkopieren oder Syntax auswendig kennen — Eingabe, Vorschau und Code liegen jetzt auf einer Seite.
Ein Beispiel-Szenario: Angenommen, ein Entwickler will für eine Landingpage schnell einen violetten Verlauf für den Hero-Bereich testen. Statt zuerst im Palettengenerator einen Analog-Ton zu suchen und dann den Gradient-String von Hand zu schreiben, trägt er direkt zwei HEX-Werte im neuen Modul ein und sieht das Ergebnis sofort in der Vorschaufläche.
Farbstopps, Typ und Winkel einstellen
Kurzantwort Zwei Farbstopps sind Pflicht, ein dritter ist optional; beim Verlaufstyp stehst du zwischen Linear (mit Winkel 0–360°) und Radial (Winkel entfällt) zur Wahl.
Stopp 1 und Stopp 2 sind über je ein Farbfeld und ein HEX-Textfeld einstellbar, Stopp 3 trägt den Hinweis „leer = nur 2 Stopps" — bleibt er unausgefüllt, entsteht automatisch ein einfacher Zwei-Farben-Verlauf. Wird Radial statt Linear gewählt, blendet die Oberfläche das Winkelfeld aus, weil ein radialer Verlauf sich kreisförmig von der Mitte nach außen ausbreitet und keine Richtungsangabe in Grad benötigt.
Beispielhafte Einstellungen im neuen Modul (nur zur Veranschaulichung)
Einstellung
Beispielwert
Typ
Linear
Winkel
135°
Stopp 1
#7C3AED
Stopp 2
#A855F7
Stopp 3 (optional)
leer
Hinweis: Die Tabelle zeigt ein einzelnes Beispiel zur Veranschaulichung der Bedienung, keine empfohlene Standardeinstellung — Winkel und Farbstopps hängen vom jeweiligen Layout ab.
CSS- und Tailwind-Code kopieren
Kurzantwort Sobald Farbstopps, Typ und Winkel feststehen, erzeugt das Modul automatisch fertigen CSS-Code (linear-gradient(…) bzw. radial-gradient(…)) und eine passende Tailwind-Arbitrary-Value-Klasse — beide per Klick kopierbar.
Das erspart genau den Schritt, der bisher am meisten Zeit kostete: die Übersetzung von HEX-Werten in korrekte Gradient-Syntax und in Tailwinds Utility-Schreibweise mit eckigen Klammern. Für einen Zwei-Stopp-Verlauf mit den Beispielwerten von oben sieht der CSS-Code etwa so aus wie background: linear-gradient(135deg, #7C3AED, #A855F7);, während die Tailwind-Variante als Arbitrary-Value-Klasse ausgegeben wird, die dieselben Farbstopps referenziert.
Weil beide Code-Zeilen direkt aus den eingegebenen Farbstopps generiert werden, entfällt auch das übliche Risiko, beim manuellen Abtippen eine Ziffer im HEX-Code zu vertauschen — ein Fehler, der bei Verläufen besonders unangenehm auffällt, weil er sich über eine ganze Fläche statt nur eine Zeile Text zieht.
Für welche Anwendungsfälle sich das eignet
Kurzantwort Das Modul eignet sich besonders für schnelle Verlaufs-Entwürfe direkt neben der übrigen Farbarbeit — etwa wenn eine Palettenfarbe aus dem Konverter sofort als Hero-, Button- oder Badge-Verlauf getestet werden soll.
Ein typisches Beispiel: Jemand hat im oberen Teil der Seite bereits eine Markenfarbe per HEX-Eingabe geprüft und deren WCAG-Kontrast kontrolliert. Statt die Seite zu verlassen, um einen Verlauf daraus zu bauen, trägt die Person dieselben HEX-Werte direkt im neuen Verlaufs-Modul ein, wählt Linear oder Radial, prüft die Live-Vorschau und kopiert anschließend den passenden Code für CSS oder Tailwind — alles in einem einzigen Arbeitsschritt auf derselben Seite.
Farben umrechnen, Kontrast prüfen und jetzt auch Verläufe direkt bauen — mit Live-Vorschau und CSS-/Tailwind-Code, alles im Browser.
Was ist neu am CSS-Verlaufsgenerator im Farbkonverter?
Der Farbkonverter hat ein eigenständiges Verlaufs-Modul erhalten: Du wählst zwischen linearem und radialem Verlauf, legst 2 oder 3 Farbstopps fest, siehst sofort eine Live-Vorschau und bekommst passenden CSS- und Tailwind-Arbitrary-Value-Code zum Ein-Klick-Kopieren — alles auf derselben Seite, ohne separates Tool.
Muss ich einen dritten Farbstopp angeben?
Nein. Der dritte Farbstopp ist optional: Bleibt das Feld leer, erzeugt der Generator einen einfachen Zwei-Farben-Verlauf. Wird ein dritter Wert eingetragen, entsteht ein Drei-Stopp-Verlauf mit einem Zwischenton, der zwischen den beiden Randfarben liegt.
Wie unterscheidet sich ein linearer von einem radialen Verlauf im Generator?
Bei Linear verlaufen die Farbstopps entlang einer geraden Achse, deren Richtung über den Winkel (0–360°) gesteuert wird. Bei Radial breiten sich die Farben stattdessen kreisförmig von einem Mittelpunkt nach außen aus, der Winkel spielt dabei keine Rolle. Der Generator blendet das Winkelfeld daher aus, sobald Radial gewählt ist.
In welcher Form wird der Verlaufscode ausgegeben?
Der Generator gibt sowohl reines CSS (etwa linear-gradient(135deg, #7C3AED, #A855F7)) als auch eine Tailwind-Arbitrary-Value-Klasse aus, die dieselben Farbstopps als Utility-Syntax abbildet. Beide Zeilen lassen sich per Klick in die Zwischenablage kopieren, ganz ohne die Werte manuell abzutippen.
Läuft der Verlaufsgenerator lokal, ohne eigene Bibliothek?
Ja. Das Modul ist Teil derselben Seite wie der übrige Farbkonverter, läuft komplett im Browser und lädt keine zusätzliche Bibliothek nach. Es werden keine Farbwerte an einen Server übertragen; die Live-Vorschau wird direkt aus den eingegebenen Farbstopps berechnet.
Kurzer Methodik-Hinweis: Dieser Beitrag beschreibt eine tatsächlich im Tool vorhandene Funktion (CSS-Verlaufsgenerator, Abschnitt „Verlauf" im Farbkonverter) und erklärt ihre Bedienung. Alle Beispielwerte und Code-Snippets dienen nur zur Veranschaulichung und sind keine gemessene Referenz. Für barrierefreie Projekte gilt stets die aktuelle WCAG-Spezifikation als verbindliche Quelle.