CSS Gradient Generator
Gestalten Sie einen Verlauf durch Ziehen der Farbstopps, wählen Sie, wie die Farben gemischt werden, und kopieren Sie sauberes CSS – oder exportieren Sie ihn als SVG oder PNG.
- Linear · radial · konisch
- OKLab-Mischung
- CSS + Tailwind
- SVG + PNG
Wie die Farben zwischen zwei Stopps berechnet werden. OKLab vermeidet das stumpfe graue Band, das sRGB zwischen gegenüberliegenden Farben erzeugt.
Farbstopps
Exportieren
SVG kennt keine konischen Verläufe. Nutzen Sie für einen konischen Verlauf den PNG-Export.
Vorlagen
So erstellen Sie einen CSS-Verlauf
Alles aktualisiert sich live.
- 1
Farben festlegen
Ein Klick auf die Leiste fügt einen Stopp hinzu, Ziehen verschiebt ihn, darunter bearbeiten Sie jede Farbe. Oder Sie starten mit einer Vorlage.
- 2
Form geben
Wählen Sie linear, radial oder konisch, Winkel oder Mittelpunkt und die Art der Farbmischung.
- 3
Kopieren oder exportieren
Kopieren Sie den CSS- oder Tailwind-Code oder laden Sie den Verlauf als SVG oder als PNG in beliebiger Größe.
Verläufe ohne matschige Mitte
Moderne Farbmischung, kompatible Ausgabe.
Drei Verlaufsarten
Linear mit beliebigem Winkel, radial als Kreis oder Ellipse und konisch für Tortenstück-Verläufe – jeweils mit Positionssteuerung.
Wahrnehmungsgetreue Mischung
Mischen Sie in OKLab oder OKLCH, und das graue, stumpfe Band, das sRGB zwischen gegenüberliegenden Farben erzeugt, verschwindet.
Direkt bearbeiten
Stopps per Klick hinzufügen, ziehen, mit den Pfeiltasten verschieben, per Doppelklick löschen. Farben dürfen teilweise transparent sein.
CSS für jeden Browser
Nutzen Sie die kurze moderne Syntax oder schalten Sie maximale Unterstützung ein: derselbe Look mit zusätzlichen Stopps, plus Fallback in Vollfarbe.
Vektor und Bitmap
SVG für verlustfreies Skalieren in Designprogrammen, PNG bis 8000 px für Folien, Hintergründe und E-Mails.
Vorlagen und Zufall
Achtzehn Ausgangspunkte und ein Zufallsgenerator, der harmonische Zweier- und Dreierkombinationen liefert.
Link zum Teilen
Kopieren Sie einen Link, der das Tool mit demselben Inhalt öffnet. Die Daten stehen im Teil der Adresse nach dem #, den Browser nicht an Server senden.
Privat
Alles läuft in Ihrem Browser. Was Sie eingeben oder öffnen, wird nicht an einen Server gesendet.
CSS-Verläufe erklärt
Ein CSS-Verlauf ist ein Bild, das der Browser selbst erzeugt – er kostet keinen Download und bleibt in jeder Größe scharf. linear-gradient() mischt entlang einer Linie: 0deg zeigt nach oben, 90deg nach rechts, die Winkel wachsen im Uhrzeigersinn. radial-gradient() breitet sich von einem Mittelpunkt als Kreis oder Ellipse aus, und conic-gradient() läuft wie ein Uhrzeiger um den Mittelpunkt – die Grundlage für Tortendiagramme und Farbkreise.
Jeder Farbstopp hat eine Farbe und eine Position. Dazwischen interpoliert der Browser – traditionell in sRGB, Kanal für Kanal. Das funktioniert bei benachbarten Farbtönen, doch zwischen gegenüberliegenden Farben wie Blau und Gelb wird die Mitte grau. Modernes CSS lässt Sie den Farbraum wählen: linear-gradient(in oklab, blue, yellow) mischt so, wie das Auge es erwartet, und in oklch wandert über den Farbkreis für kräftige, regenbogenartige Übergänge.
Die Syntax in oklab unterstützen alle aktuellen Browser (ab Chrome 111, Safari 16.2 und Firefox 127). Für ältere kann dieser Generator denselben Look als klassischen Verlauf mit zusätzlichen Zwischenstopps schreiben. Zwei weitere Praxistipps: Setzen Sie eine schlichte background-color als Fallback vor den Verlauf, und geben Sie großen, kontrastarmen Flächen einen leichten Winkel oder einen dritten Stopp, um sichtbare Streifen zu vermeiden.
Die drei Verlaufsfunktionen
| Funktion | Mischt | Typische Verwendung |
|---|---|---|
| linear-gradient() | Entlang einer Geraden in einem Winkel | Hintergründe, Buttons, Overlays, Textfüllungen |
| radial-gradient() | Von einem Mittelpunkt nach außen | Spotlights, Leuchteffekte, Vignetten |
| conic-gradient() | Um einen Mittelpunkt herum | Tortendiagramme, Farbkreise, Ladeanzeigen |
| repeating-…() | Dasselbe, gekachelt | Streifen und Muster |
Tipps
- Die exakten Farben für Ihre Stopps finden Sie mit dem Farbumrechner.
- Ein fertiges Farbset liefert die Farbpaletten-Sammlung, ein eigenes der Farbpaletten-Generator.
- Text auf einem Verlauf muss auf der hellsten und der dunkelsten Stelle lesbar sein – prüfen Sie beide mit dem Kontrastprüfer.
- Für das Ausblenden ins Transparente verwenden Sie dieselbe Farbe mit Alpha null (etwa rgb(6 182 212 / 0)) statt des Schlüsselworts „transparent“, das ältere Browser über Grau mischen.
Häufig gestellte Fragen
Keine Antwort gefunden? Schreiben Sie uns – wir antworten schnell.
Wie erstelle ich einen Verlauf in CSS?
Verwenden Sie eine Verlaufsfunktion als Hintergrundbild: background: linear-gradient(135deg, #06b6d4, #6366f1);. Dieser Generator schreibt den Code für Sie, samt Winkel, Stopps und Fallback.
Warum wirkt mein Verlauf in der Mitte grau?
Weil die Farben in sRGB gemischt werden, wo sich gegenüberliegende Farbtöne aufheben. Wählen Sie die OKLab-Mischung – oder setzen Sie einen Stopp mit kräftiger Farbe dazwischen –, und das graue Band verschwindet.
Was unterscheidet linear, radial und konisch?
Linear ändert die Farbe entlang einer Linie, radial vom Mittelpunkt nach außen, konisch um den Mittelpunkt herum wie die Zeiger einer Uhr.
Funktioniert „in oklab“ in allen Browsern?
In allen aktuellen Versionen von Chrome, Edge, Safari und Firefox. Für ältere Browser schalten Sie „Maximale Browser-Unterstützung“ ein: Dasselbe Bild wird in klassischer Syntax geschrieben.
Kann ich den Verlauf als Bild verwenden?
Ja. Exportieren Sie ihn als SVG, das in jeder Größe scharf bleibt, oder als PNG in den gewünschten Pixelmaßen. Konische Verläufe gibt es nur als PNG, weil SVG keinen konischen Verlauf kennt.
Werden meine Daten an einen Server gesendet?
Nein. Das Tool läuft vollständig in Ihrem Browser. Ihre Eingaben werden nicht hochgeladen, protokolliert oder auf unseren Servern gespeichert.
Weitere kostenlose Entwickler-Tools
Kodieren, formatieren, testen, umrechnen und erzeugen – kleine Werkzeuge, die im Browser laufen und Ihre Daten auf Ihrem Gerät lassen.