Zum Hauptinhalt springen
ToolsByUs

CSS-Gradient erstellen

Der CSS-Farbverlauf-Generator baut einen linearen, radialen oder konischen Farbverlauf und gibt Ihnen das CSS. Er interpoliert in OKLab statt in sRGB – genau das verhindert, dass ein Blau-zu-Gelb-Verlauf in der Mitte grau wird – und schreibt das Ergebnis zweimal aus: einmal als moderner `in oklab`-Verlauf und einmal als dieselbe Kurve, abgetastet in zwölf einfache Farbstopps, damit ältere Browser dasselbe Bild bekommen.

Nur lokal

Typ

Die Farbe ändert sich entlang einer geraden Linie im gewählten Winkel. Meist die passende Wahl.

Farbstopps (2)

  • 0%
  • 100%

CSS

background: linear-gradient(135deg, #00696f 0.0%, #2d726e 9.1%, #467b6c 18.2%, #5b846a 27.3%, #6f8c67 36.4%, #839563 45.5%, #969d5e 54.5%, #a9a557 63.6%, #bcad4f 72.7%, #cfb544 81.8%, #e2bd35 90.9%, #f5c518 100.0%);
background: linear-gradient(135deg in oklab, #00696f 0%, #f5c518 100%);

Zwei Deklarationen in dieser Reihenfolge: Browser mit Unterstützung für in oklab verwenden die zweite; ältere nutzen die erste mit entsprechend berechneten Farbstopps.

Der Unterschied durch den Farbraum

Dieselben Farbstopps auf zwei Arten interpoliert. Der Unterschied ist bei gegenüberliegenden Farbtönen am größten – etwa Blau und Gelb.

sRGB – Standard

OKLab – in oklab

Fallback mit 12 Farbstopps

Wie funktioniert CSS-Gradient erstellen?

Ein Farbverlauf ist eine Regel, um jede Farbe zwischen zwei anderen zu erzeugen, und die ganze Frage ist, in welchem Raum diese Erzeugung passiert. Standard ist sRGB, und sRGB-Interpolation hat einen berühmten Ausfall: Die Mitte zweier gesättigter Farben von gegenüberliegenden Seiten des Farbrads ist keine Farbe zwischen ihnen, sondern ein entsättigter Brei. Blau zu Gelb wird grau. Rot zu Grün wird braun. Das ist kein Browser-Bug – das ist das Ergebnis davon, drei gamma-kodierte Kanäle zu mitteln.

Warum OKLab das behebt

OKLab ist ein wahrnehmungsnaher Raum: Seine drei Achsen sind ungefähr Helligkeit, Grün-zu-Rot und Blau-zu-Gelb, und Abstände in ihm entsprechen den Abständen, die das Auge meldet. Zwei Farben dort zu mitteln ergibt die Farbe, die ein Mensch als halben Weg zwischen ihnen benennen würde – genau dafür wurde dieser Raum konstruiert. CSS Color 4 lässt Sie das direkt mit in oklab anfordern, und jeder aktuelle Browser unterstützt es.

Was der Fallback tut

in oklab kam 2023 in die Browser. Damit nichts Älteres mit einem sichtbar anderen Farbverlauf zurückbleibt, tastet dieses Tool die OKLab-Kurve an zwölf Punkten ab und schreibt sie als gewöhnliche Farbstopps aus. Der alte Browser interpoliert dann in sRGB – aber nur über kurze Segmente, deren Endpunkte bereits auf der korrekten Kurve liegen, und über ein so kurzes Segment widersprechen sich die beiden Räume nicht sichtbar. Beide Deklarationen werden ausgegeben, in dieser Reihenfolge: Ein Browser, der die zweite versteht, nimmt sie, und einer, der sie nicht versteht, behält die erste.

Das andere, was bei Farbverläufen schiefgeht

Banding. Ein Farbverlauf über eine breite Fläche durchläuft eine begrenzte Zahl von 8-bit-Werten, und auf einer großen, flachen Fläche sehen Sie die Stufen als Streifen. Nichts im CSS kann das beheben, denn das Display hat schlicht keine Werte mehr; was hilft, ist eine kleine Menge Rauschen obendrauf – eine gekachelte PNG von ein paar hundert Bytes bei 3% Deckkraft oder eine SVG-feTurbulence-Ebene. Wenn Ihr Hero-Verlauf gestreift aussieht, schauen Sie genau auf das, und keine Menge zusätzlicher Farbstopps hilft.

Und ein Wort dazu, sie überhaupt einzusetzen

Ein Farbverlauf hinter Text ist ein Kontrastproblem: Das Verhältnis ändert sich über das Element, also sind die Ecke, die besteht, und die Ecke, die durchfällt, beide real. Muss Text darauf sitzen, prüfen Sie die Extreme statt die Mitte, oder setzen Sie den Text auf eine vollflächige Fläche über dem Farbverlauf.

Farbstopps und eine Richtung

linear, 135°
#00696f  0%
#f5c518  100%

Das CSS, zweimal

background: linear-gradient(135deg, #00696f 0.0%,
  #2a7767 9.1%, #4b855c 18.2%, …);
background: linear-gradient(135deg in oklab,
  #00696f 0%, #f5c518 100%);

Welche Optionen und Sonderfälle unterstützt CSS-Gradient erstellen?

Technische Referenz und Optionen
ParameterTypStandardVerhalten & Sonderfälle
LinearWinkel135deg0deg zeigt nach oben, 90deg zeigt nach rechts. Der Winkel ist die Richtung, in der die Farben verlaufen, nicht die Richtung, in der die Linie geneigt ist.
RadialKreis im Zentrum—Farben laufen von der Mitte nach außen. `circle` behält die Rundung in einem nicht-quadratischen Feld bei; das Standard-`ellipse` passt sich dem Element an.
Konischab Winkel135degFarben schwingen sich um den Mittelpunkt. Die Grundlage für jeden CSS-Kreisdiagramm und -zeiger und für den Farbring in einem Farbwähler.
in oklabSchlüsselwortonWahrnehmungsbasierte Interpolation. Unterstützt seit 2023 – Chrome 111, Safari 16.2, Firefox 113. Ausschalten, um zu sehen, was ein normaler Gradient mit den gleichen Stoppstellen macht.
Ausweichwert12 HaltepunkteautomatischDie OKLab-Kurve in einfachen Stopppunkten abgetastet, ausgegeben als erste von zwei Deklarationen, damit ältere Browser übereinstimmen.
Position des Haltepunkts0–100%gleichmäßigWo auf der Gradientenlinie die Farbe landet. Zwei Stoppstellen an derselben Position erzeugen eine harte Kante anstatt eines Übergangs.
Farbe des HaltepunktsBeliebige Notation—Hex, rgb(), hsl(), oklch() oder ein CSS-Farbwert. Alpha wird beibehalten, und ein Gradient zu `transparent` sollte die Farbe mit Alpha 0 statt des Keywords angeben.
Haltepunkte2 oder mehr2Neue Stoppstellen landen in der größten Lücke, indem sie die Farbe, die die Kurve bereits dort hat, übernehmen, sodass das Hinzufügen einer Stelle den Gradienten nicht ändert.

Häufig gestellte Fragen

Wie erstelle ich einen CSS-Farbverlauf?

Setzen Sie `background: linear-gradient(135deg, #00696f, #f5c518)` – ein Winkel, gefolgt von zwei oder mehr Farben. 0deg läuft von unten nach oben, 90deg von links nach rechts. Ein Prozentsatz nach einer Farbe pinnt sie an eine Position auf der Linie; `radial-gradient` nehmen Sie für Farben, die von einem Punkt ausstrahlen, und `conic-gradient` für Farben, die sich um einen Punkt herumdrehen. Diese Seite schreibt alle drei aus, mit dem Interpolations-Fix und einem Fallback, aus den Farbstopps, die Sie setzen.

Warum wird mein Farbverlauf in der Mitte grau?

Weil der Browser gamma-kodierte sRGB-Kanäle mittelt, und der Mittelwert zweier gesättigter Farben von gegenüberliegenden Seiten des Farbrads ist eine entsättigte. Blau zu Gelb ist der klassische Fall. Ein `in oklab` nach dem Winkel behebt das – die Interpolation passiert dann in einem wahrnehmungsnahen Raum, in dem die Mitte die Farbe ist, die Sie als halben Weg benennen würden. Für ältere Browser nehmen Sie den Zwölf-Stopp-Fallback, den dieses Tool daneben ausgibt.

Ist `in oklab` sicher genug für den Produktivbetrieb?

Ja, mit dem Fallback. Es kam mit Chrome 111, Safari 16.2 und Firefox 113, was die überwältigende Mehrheit des Traffics 2026 abdeckt. Alles Ältere ignoriert die gesamte Deklaration als ungültig – deshalb wird die Version mit einfachen Farbstopps zuerst ausgegeben: CSS nimmt die letzte Deklaration, die es versteht, also behalten alte Browser den Fallback und neue die OKLab-Version. Nie sieht irgendjemand einen kaputten Hintergrund.

Warum hat mein Farbverlauf sichtbare Streifen?

Das ist Banding, eine Grenze des Displays, nicht des CSS. Über eine große Fläche muss ein Farbverlauf einen begrenzten Satz von 8-bit-Werten durchlaufen, und die Stufen werden als Bänder sichtbar – am schlimmsten bei subtilen dunklen Verläufen, wo die Werte wahrnehmungsmäßig am weitesten auseinanderliegen. Mehr Farbstopps helfen nicht, weil die Werte schlicht nicht existieren. Eine schwache Rauschtextur obendrauf hilft: eine gekachelte PNG bei rund 3% Deckkraft oder eine SVG-feTurbulence-Ebene.

Darf Text auf einen Farbverlauf?

Ja, aber das Kontrastverhältnis ist an jedem Punkt anders; „es besteht“ ist also keine einzelne Tatsache über das Element. Prüfen Sie den hellsten und den dunkelsten Punkt, den der Text tatsächlich kreuzt, und nehmen Sie den schlechteren der beiden als das reale Verhältnis. Wo die Spanne breit ist, lautet die praktische Antwort: Setzen Sie den Text auf eine vollflächige oder halbdeckende Fläche über dem Farbverlauf statt direkt darauf.

Wie blende ich einen Farbverlauf nach transparent aus?

Nicht mit dem Schlüsselwort `transparent`. In mehreren Engines löst es zu transparentem Schwarz auf; ein Rot, das darauf ausblendet, wandert durch dunkle, schmutzige Pinktöne. Nehmen Sie stattdessen dieselbe Farbe mit Alpha null – `#ff0000` zu `#ff000000` oder `rgb(255 0 0 / 0)` –, dann hält der Farbton bis ganz nach unten durch. In OKLab zu interpolieren mildert den Effekt, beseitigt aber nicht seine Ursache.

ToolsByUs-Team · Wie wir unsere Tools prüfen