Über dieses Tool
Farbverläufe sind in CSS keine Bilder, sondern werden vom Browser berechnet: Sie laden ohne zusätzliche Datei, skalieren auf jede Größe und lassen sich jederzeit anpassen. Typische Einsatzzwecke sind Hintergründe von Hero-Bereichen, Buttons, Karten oder Text mit Verlaufsfarbe.
Der Generator erstellt lineare Verläufe mit frei wählbarem Winkel, radiale Verläufe als Kreis oder Ellipse und konische Verläufe für Farbräder oder Tortendiagramme, jeweils auch als wiederholendes Muster. Du kannst bis zu 20 Farbstopps setzen, auch mit Transparenz (z. B. #00000080 oder rgb(0 0 0 / 50 %)).
Der fertige Code enthält zusätzlich eine einfarbige background-color als Fallback. Die Einstellungen stehen in der URL, du kannst einen Verlauf also als Link teilen.
So funktioniert’s
- Wähle die Art des Verlaufs und stelle Winkel, Form oder Mittelpunkt ein – oder starte mit einer Vorlage.
- Passe die Farbstopps an: Farbe per Farbwähler oder als Text eingeben, Position mit dem Regler verschieben.
- Füge weitere Stopps hinzu oder kehre den Verlauf mit „Umkehren“ um.
- Kopiere den CSS-Code und füge ihn in dein Stylesheet ein.
Häufige Fragen
Was ist der Unterschied zwischen linear, radial und konisch?
Ein linearer Verlauf läuft entlang einer Geraden in eine Richtung. Ein radialer Verlauf breitet sich kreis- oder ellipsenförmig von einem Mittelpunkt aus. Ein konischer Verlauf dreht sich um den Mittelpunkt, wie die Farben eines Farbrads.
Wie bekomme ich harte Kanten statt weicher Übergänge?
Setze zwei Stopps mit unterschiedlicher Farbe auf dieselbe Position, z. B. Rot bei 50 % und Blau bei 50 %. Mit „Wiederholen“ entstehen so Streifen.
Wie lege ich einen Verlauf über ein Bild?
background-image akzeptiert mehrere Werte, durch Komma getrennt. Schreibe den Verlauf mit transparenten Farben zuerst und dahinter url(bild.jpg). Der Verlauf liegt dann über dem Bild.
Welche Farben passen gut zusammen?
Harmonische Farbkombinationen findest du mit dem Farbpaletten-Generator, und mit dem Farbkonverter & Kontrastprüfer wandelst du Farben zwischen HEX, RGB, HSL und OKLCH um.
Funktionieren CSS-Verläufe in allen Browsern?
Lineare und radiale Verläufe funktionieren in allen aktuellen Browsern, konische Verläufe seit etwa 2020 ebenfalls. Für sehr alte Browser enthält der Code eine einfarbige Hintergrundfarbe als Ersatz.