CSS-Farbverlauf erzeugen

VonOleh Soloninaktualisiert 25. September 2026

Ergebnis

background-image: linear-gradient(90deg, #7b3ff2, #1e90ff);

CSS-Regel

background-image: linear-gradient(90deg, #7b3ff2, #1e90ff);

Fallback — einfarbig

background-color: #7b3ff2;

Wie der Winkel gezählt wird

CSS zählt den Winkel von „nach oben“ im Uhrzeigersinn, die Mathematik dagegen von der x-Achse gegen ihn. 90deg läuft deshalb von links nach rechts — nicht 0 Grad, wie es die mathematische Zählung ergäbe.

Hinweis

Die Fallback-Zeile gehört eine Zeile über den Verlauf: Browser, die ihn nicht kennen, nehmen dann wenigstens die Farbe.

Das Ergebnis ist ein Richtwert und ersetzt keine Beratung.

Zwei Hex-Farben, ein Winkel — fertige background-Regel für linearen oder radialen Verlauf, mit Fallback.

Eine Regel wie background-image: linear-gradient(90deg, #1e3a8a, #38bdf8) füllt die Fläche von links nach rechts: am linken Rand steht das dunkle Blau, am rechten das helle. Der Generator setzt genau diese Zeile aus zwei Hex-Farben, der Art des Verlaufs und dem Winkel zusammen und stellt ihr die einfarbige Ersatzzeile voran.

Erzeugt wird der einfache Fall mit zwei Farbstopps ohne Positionsangaben — der Verlauf, der in Kopfbereichen, Schaltflächen und Karten am häufigsten gebraucht wird. Mehrere Stopps, Prozentangaben dazwischen, repeating-linear-gradient und conic-gradient schreiben Sie danach von Hand; die Syntax bleibt dieselbe.

So benutzen Sie den Rechner

Tragen Sie die beiden Farben als Hex-Wert ein; die erste steht auch in der Fallback-Zeile.
Wählen Sie linear oder radial — nur ein linearer Verlauf hat eine Richtung.
Stellen Sie den Winkel ein: 0 läuft von unten nach oben, 90 von links nach rechts.
Übernehmen Sie beide Zeilen; die einfarbige gehört vor die Verlaufszeile.

Der Winkel wird anders gezählt, als man erwartet

CSS zählt den Winkel eines Verlaufs von „nach oben“ im Uhrzeigersinn. Die Mathematik zählt von der x-Achse gegen den Uhrzeigersinn. Zwischen beiden liegen 90 Grad und eine Spiegelung — deshalb landet fast jeder erste Versuch um eine Vierteldrehung daneben.

Merken lässt sich das an einem Wert: 90deg läuft nach rechts, nicht nach oben. Wer lieber gar nicht rechnet, schreibt die Richtung aus — „to right“ ist dasselbe wie 90deg und liest sich in einem halben Jahr besser.

Die Winkel gibt der Rechner aus, samt der Richtung, in die sie laufen. Die Einschränkung bei den schrägen Werten hat einen Grund: Bei „to top right“ berechnet der Browser den Winkel aus der Fläche, 45deg bleibt immer 45 Grad — bei einer breiten Fläche ist das nicht dasselbe.
Winkel	Richtung	Gleichbedeutend mit
0deg	von unten nach oben	to top
45deg	nach rechts oben	to top right (nur bei quadratischer Fläche)
90deg	von links nach rechts	to right
135deg	nach rechts unten	to bottom right (nur bei quadratischer Fläche)
180deg	von oben nach unten	to bottom
270deg	von rechts nach links	to left

Warum die Mitte grau wird

Ein Verlauf zwischen zwei kräftigen, gegenüberliegenden Farben wird in der Mitte stumpf. Der Grund ist die Berechnung: Browser mischen standardmäßig im sRGB-Raum, und dort liegt zwischen Blau und Gelb ein ungesättigtes Grau statt eines Grüns.

Zwei Auswege gibt es. Der einfache: eine dritte Farbe in die Mitte setzen, die den Weg beschreibt. Der genaue: in einem anderen Farbraum mischen, was CSS seit Kurzem mit „in oklab“ erlaubt — dieser Generator schreibt bewusst die einfache, überall unterstützte Form.

Beide Zeilen gibt der Rechner aus: background-color mit der Einzelfarbe und background-image mit dem Verlauf. Es sind zwei verschiedene Eigenschaften, die Reihenfolge ändert am Ergebnis also nichts — die Farbe liegt immer hinter dem Verlauf.
Zeile	Wozu
background-color: #7b3ff2;	Fallback — gilt, wenn die nächste Zeile nicht verstanden wird
background-image: linear-gradient(90deg, #7b3ff2, #1e90ff);	der Verlauf selbst

Der Winkel wird anders gezählt, als man erwartet

Gezählt wird ab der Richtung „nach oben“ und im Uhrzeigersinn: 0deg läuft von unten nach oben, 90deg von links nach rechts, 180deg von oben nach unten, 270deg von rechts nach links. Der Winkel benennt dabei die Richtung, in die der Verlauf zeigt — die erste Farbe liegt am gegenüberliegenden Rand.

Das ist nicht die Zählweise aus der Mathematik. Dort beginnt man an der positiven x-Achse und geht gegen den Uhrzeigersinn; wer das gewohnt ist, tippt 0deg, erwartet einen waagerechten Verlauf und bekommt einen senkrechten. Wem Gradangaben zu abstrakt sind, der schreibt statt der Zahl to right, to bottom oder to bottom right — CSS erlaubt beides, und die Schlüsselwörter lassen sich nicht falsch herum lesen.

Warum eine einfarbige Zeile davor gehört

Versteht ein Renderer den Verlauf nicht, verwirft er die ganze Deklaration — und die Fläche bleibt ohne Hintergrund, heller Text auf Weiß inklusive. Deshalb notiert man zusätzlich background-color mit einer einzelnen Farbe, üblicherweise eine Zeile davor: Die ungültige Verlaufszeile fällt weg, die Farbzeile bleibt stehen. Die Reihenfolge ist dabei bloße Gewohnheit, denn es sind zwei verschiedene Eigenschaften; die Farbe greift auch dann, wenn sie darunter steht. Wichtig ist etwas anderes — den Verlauf nicht in die Kurzform background schreiben, die setzt background-color mit zurück, und der Ersatz ist wieder weg. In heutigen Browsern ist das selten der Ernstfall; in E-Mail-Clients, bei der PDF-Ausgabe und in älteren eingebetteten Ansichten schon.

Als Ersatzfarbe nimmt der Generator die erste der beiden. Ob das die richtige Wahl ist, entscheidet der Text darauf: Steht heller Text auf dem Verlauf, muss auch die Ersatzfarbe dunkel genug bleiben, sonst ist die Seite ohne Verlauf zwar farbig, aber unlesbar. Den Kontrast prüft man deshalb gegen die dunkelste und die hellste Stelle, nicht gegen die Mitte.

Warum die Mitte grau wird

Ein Verlauf von Blau nach Gelb ist in der Mitte nicht bunt, sondern glatt grau — #0000ff und #ffff00 treffen sich exakt bei #808080. Der Grund ist die Interpolation: CSS mischt standardmäßig in sRGB, also schlicht rechnerisch zwischen den beiden Zahlentripeln. Liegen die Farben im RGB-Würfel einander gegenüber, mitteln sich ihre Kanäle zu einem neutralen Ton. Bei anderen weit auseinanderliegenden Paaren wird die Mitte nicht grau, aber stumpf und entsättigt: Blau nach Orange, #2563eb nach #f97316, trifft sich bei einem staubigen Mauve. Der Generator meldet den Fall im Hinweisfeld, wenn zwei kräftige Farben sich in der Mitte fast zu Grau ausgleichen.

Zwei Auswege. Entweder Sie setzen einen dritten Stopp in die Mitte, der die Sättigung hält — bei Blau nach Gelb etwa ein Grün oder ein kräftiges Türkis, je nachdem, welchen Weg der Verlauf nehmen soll. Oder Sie wechseln den Farbraum: linear-gradient(in oklch, #0000ff, #ffff00) mischt entlang eines wahrnehmungsnahen Raums und behält die Sättigung. Der Generator gibt die klassische Form ohne Farbraumangabe aus; das in oklch ergänzen Sie bei Bedarf selbst — ältere Browser verwerfen dann die ganze Deklaration samt Verlauf, was die einfarbige Zeile umso wichtiger macht.

Quellen

Stand der Werte: 2026. Die Ergebnisse sind Orientierungswerte und ersetzen keine fachliche Beratung.

Häufige Fragen

Warum bleibt der Winkel bei „radial“ ohne Wirkung?

Weil radial-gradient keine Richtung kennt: Der Verlauf geht von einem Mittelpunkt nach außen. Steuerbar sind stattdessen die Form — circle oder ellipse — und die Lage über at, etwa radial-gradient(circle at 30% 20%, …). Der Generator setzt circle und lässt die Lage offen; ein at 30% 20% ergänzen Sie direkt in der Klammer, und ellipse ersetzt circle.

Gehört ein Verlauf in background-color oder background-image?

In background-image. Verläufe sind in CSS ein Bildwert, keine Farbe — deshalb wirken auf ihnen auch background-size, background-repeat und background-position, und deshalb funktioniert background-color: linear-gradient(…) nicht. Genau diese Trennung macht die Fallback-Zeile überhaupt erst möglich, denn beide Eigenschaften stehen nebeneinander.

Warum sieht mein Verlauf gestreift aus?

Das ist Banding. Bei acht Bit je Kanal liegen zwischen zwei ähnlichen Farben nur wenige Zwischenstufen, und über eine große Fläche verteilt werden daraus sichtbare Kanten — besonders bei dunklen Verläufen mit geringem Farbabstand. Es hilft, den Abstand der Farben zu vergrößern, den Verlauf über eine kürzere Strecke laufen zu lassen — je weniger Pixel auf eine Stufe entfallen, desto schmaler die Bänder — oder eine schwache Rauschtextur darüberzulegen.

Warum zeigt 90 Grad nach rechts und nicht nach oben?

Weil CSS von „nach oben“ aus im Uhrzeigersinn zählt. 0deg ist damit nach oben, 90deg nach rechts, 180deg nach unten. Die mathematische Zählung beginnt an der x-Achse und läuft gegen den Uhrzeigersinn — zwischen beiden liegt eine Vierteldrehung und eine Spiegelung.

Brauche ich die Fallback-Zeile noch?

Sie kostet eine Zeile und rettet den Fall, dass die Verlaufszeile aus irgendeinem Grund nicht ankommt — ein Tippfehler im Farbwert reicht schon, und ohne Fallback steht der Text dann auf der Grundfarbe der Seite. Der Aufwand ist kleiner als die Fehlersuche.

Warum sieht mein Verlauf bei 45 Grad anders aus als erwartet?

Weil ein Winkel und eine Ecke zwei verschiedene Dinge sind. Bei „to top right“ berechnet der Browser den Winkel aus Breite und Höhe: Die Linie der Mittelfarbe läuft durch die beiden anderen Ecken. 45deg zeigt immer auf 45 Grad. Nur bei einem Quadrat fällt beides zusammen.

Kann ich mehr als zwei Farben verwenden?

In CSS ja, beliebig viele mit eigenen Positionen. Dieser Generator schreibt zwei, weil das der Fall ist, in dem der Winkel die ganze Entscheidung ist. Eine dritte Farbe hängen Sie einfach vor der schließenden Klammer an.

Nützliche Links

Entwicklung und Web Alle Rechner

CSS-Farbverlauf erzeugen

Ergebnis

Passt dazu

Farb-Umrechner

Farbkontrast nach WCAG

Title und Meta-Description prüfen

Open-Graph-Generator

Unicode-Zeichenprüfer

Markdown in HTML umwandeln

Nützliche Links