CSS-Farbverlauf-Generator
Einen CSS-Farbverlauf mit Live-Vorschau bauen: linear oder radial, eigener Winkel, bis zu fünf Farbstopps, dazu fertiger Code für CSS und Tailwind zum Kopieren.
background: linear-gradient(135deg, #6a8fff 0%, #a67bff 100%);background-image: linear-gradient(135deg, #6a8fff 0%, #a67bff 100%);bg-[linear-gradient(135deg, #6a8fff 0%, #a67bff 100%)]Die Farben werden im Browser zusammengesetzt und nicht hochgeladen. Das Werkzeug hilft bei der Gestaltung von Website, Landingpage oder Designsystem, prüft aber keinen Kontrast zu Text und sagt nichts über Barrierefreiheit aus. Dafür eignet sich ein eigener Kontrast-Checker.
Weiteres Tool ausprobieren
Passend zu diesem Tool ausgewähltDer Farbverlauf-Generator baut einen CSS-Gradient mit Live-Vorschau. Gewählt werden ein linearer oder radialer Verlauf, beim linearen der Winkel, und zwei bis fünf Farbstopps mit Farbe und Position in Prozent. Darunter steht der fertige Code: als background, als background-image und als Tailwind-Klasse mit beliebigem Wert. Sechs Vorlagen und ein Zufallsknopf liefern Ausgangspunkte, wenn noch keine Idee da ist. Alles läuft im Browser, ohne Anmeldung und ohne Hochladen.
So funktioniert das Tool
- 01Art und Winkel wählenLinear oder radial auswählen. Beim linearen Verlauf den Winkel einstellen, voreingestellt sind 135 Grad.
- 02Farbstopps setzenFür jeden Stopp eine Farbe und eine Position zwischen 0 und 100 Prozent festlegen. Bis zu fünf Stopps sind möglich.
- 03Code kopierenDen passenden Codeblock kopieren und in das eigene Stylesheet oder die Tailwind-Klasse übernehmen.
Wann ist das nützlich?
- Hintergründe für Hero-BereicheEin dezenter Verlauf hinter Überschrift und Button wirkt lebendiger als eine flache Farbe, ohne ein Bild laden zu müssen.
- Buttons und KartenLeichte Verläufe heben Schaltflächen oder Karten hervor und lassen sich mit denselben Markenfarben abstimmen.
- Grafiken für Social MediaDie Vorschau dient auch als schnelle Farbvorlage für Beitragsbilder und Präsentationshintergründe.
Beispiele
- Zweifarbig, diagonalTürkis zu Dunkelblau unter 135 Grad ergibt linear-gradient(135deg, #1ed4c5 0%, #1f2a44 100%).
- Drei StoppsEin warmer Verlauf von #ff6a3d über #ff9a5a bei 55 Prozent bis #ffd166, unter 100 Grad.
- RadialEin radialer Verlauf beginnt in der Mitte und läuft kreisförmig nach außen, gut für Lichteffekte hinter einem Produktbild.
Tipps für ein besseres Ergebnis
- Ähnliche Farbtöne wirken ruhigerVerläufe zwischen Nachbarfarben im Farbkreis sehen sauberer aus. Gegenüberliegende Farben ergeben in der Mitte oft einen grauen Bereich.
- Text-Kontrast an beiden Enden prüfenSteht Text auf dem Verlauf, muss er am hellsten und am dunkelsten Punkt lesbar bleiben.
- Ersatzfarbe angebenVor dem Verlauf eine einfache background-color setzen, damit die Seite auch dann gut aussieht, wenn der Gradient nicht geladen wird.
Wie CSS-Verläufe aufgebaut sind
linear-gradient() nimmt einen Winkel und eine Liste von Farbstopps. 0 Grad zeigt nach oben, 90 Grad nach rechts, 180 Grad nach unten. Jeder Stopp besteht aus einer Farbe und einer Position, dazwischen rechnet der Browser die Übergänge selbst. radial-gradient() verteilt die Stopps dagegen von der Mitte nach außen.
background oder background-image
Die Kurzschreibweise background ersetzt alle Hintergrundeigenschaften auf einmal, auch eine vorher gesetzte Farbe. background-image setzt nur das Bild und lässt Farbe, Position und Größe unberührt. Wer eine Ersatzfarbe behalten will, nimmt deshalb background-image. Die Tailwind-Zeile schreibt den Verlauf als beliebigen Wert in eine Klasse.
Verläufe und Barrierefreiheit
Ein Verlauf ändert sich über die Fläche, ein einziger Kontrastwert reicht deshalb nicht. Text sollte am ungünstigsten Punkt noch genug Kontrast haben, bei normaler Schrift mindestens 4,5:1. Der Generator prüft das nicht, der Kontrast-Checker hilft dabei.
Häufige Fragen
Wie erstelle ich einen Farbverlauf in CSS?
Mit linear-gradient() oder radial-gradient() als Hintergrund. Der Generator stellt Winkel und Farbstopps ein und liefert den fertigen Code zum Kopieren.
Wie viele Farben kann ein Verlauf haben?
CSS erlaubt beliebig viele Stopps. Der Generator bietet bis zu fünf, was für die meisten Gestaltungen mehr als genug ist.
Was bedeutet der Winkel?
Er gibt die Richtung des linearen Verlaufs an: 0 Grad nach oben, 90 Grad nach rechts, 135 Grad schräg nach rechts unten.
Funktioniert der Code in allen Browsern?
Ja, lineare und radiale Verläufe ohne Präfix werden von allen aktuellen Browsern unterstützt.
Werden meine Farben gespeichert?
Nein. Vorschau und Code entstehen im Browser, nichts wird hochgeladen oder gespeichert.