Über: CSS-Farbverlauf-Generator
Ein CSS-Farbverlauf (Gradient) lässt zwei oder mehr Farben fließend ineinander übergehen – ganz ohne Bilddatei, nur mit CSS. Verläufe werden für Buttons, Banner und Kartenhintergründe verwendet, sind leichter als Bilder und bleiben auf jeder Bildschirmgröße scharf.
Wenn Sie in diesem Generator den Winkel-Drehregler oder die Farbstopps ziehen, ändern sich Vorschau und linear-gradient-, radial-gradient- bzw. conic-gradient-Code gleichzeitig.
So funktioniert’s
- Wählen Sie die Art des Verlaufs: Linear, Radial oder Konisch.
- Bei linearen und konischen Verläufen stellen Sie den Winkel mit dem Drehregler, dem Schieberegler oder als Zahl ein. Bei radialen Verläufen wählen Sie Form und Mittelpunkt.
- Ziehen Sie die Kreise auf der Farbleiste, um Farben zu verschieben. Ein Tipp auf eine freie Stelle oder auf + Farbe fügt eine Farbe hinzu. In der Liste darunter können Sie Farbe und Position (%) genau eingeben.
- Gefällt Ihnen das Ergebnis, tippen Sie auf CSS kopieren und fügen den Code in Ihr Stylesheet ein.
Verlaufsarten und Syntax
| Art | Beispielcode |
|---|---|
| Linear | linear-gradient(90deg, #4f46e5 0%, #22c1c3 100%) |
| Radial | radial-gradient(circle at center, #fff 0%, #000 100%) |
| Konisch | conic-gradient(from 0deg at center, red, yellow, red) |
Beim linearen Verlauf zeigt 0deg von unten nach oben (↑), 90deg von links nach rechts (→) und 180deg von oben nach unten (↓). Die Prozentangabe hinter einer Farbe ist die Stelle, an der diese Farbe rein erscheint. Setzen Sie zwei Farben auf dieselbe Position, entsteht eine harte Kante – so lassen sich Streifen erzeugen.
Gestaltungstipps
- Zwei stark gesättigte Komplementärfarben ergeben in der Mitte oft ein trübes Grau. Nutzen Sie Farben, die im Farbkreis nah beieinander liegen, oder fügen Sie eine hellere Farbe dazwischen ein.
- Steht Text auf einem Verlauf, prüfen Sie die Lesbarkeit an der hellsten und der dunkelsten Stelle. Dabei hilft die Kontrastprüfung im Farbcode-Umrechner.
- Die erste Zeile background: Volltonfarbe; ist ein Fallback für sehr alte Browser.
Häufige Fragen
Funktioniert das in allen Browsern?
linear-gradient und radial-gradient funktionieren in allen aktuellen Browsern ohne -webkit-Präfix. conic-gradient wird ab Chrome 69, Safari 12.1 und Firefox 83 unterstützt.
Kann ich Text mit einem Farbverlauf füllen?
Ja. Kombinieren Sie den kopierten background-Code mit background-clip: text; -webkit-background-clip: text; color: transparent; – dann übernimmt der Text den Verlauf.
Wie viele Farben kann ich hinzufügen?
In diesem Tool sind bis zu 12 Farbstopps möglich. CSS selbst kennt keine Begrenzung.