Farbverläufe im Webdesign: CSS Gradients, OKLCH und moderne Techniken

Hand aufs Herz: Farbverläufe waren lange Zeit so etwas wie das Stiefkind des Webdesigns. Erinnert sich noch jemand an die glänzenden Aqua-Buttons aus den frühen 2000ern? Danach kam die Flat-Design-Ära und Gradients verschwanden komplett. Aber jetzt? Farbverläufe erleben gerade die größte Renaissance seit es CSS gibt – und diesmal sind sie besser als je zuvor.

Ob du dir die Instagram-App anschaust, über die Stripe-Landingpage scrollst oder das neue Google-Logo betrachtest – Farbverläufe sind überall. Und das Beste daran: Mit modernen CSS-Features wie OKLCH-Interpolation gehören die berüchtigten „schmutzigen Mitten“ endlich der Vergangenheit an.

In diesem Guide zeige ich dir alles, was du über Farbverläufe wissen musst. Von den Grundlagen über die richtige CSS-Syntax bis hin zu den besten Tools und häufigsten Fehlern. Egal ob du gerade erst anfängst oder schon Erfahrung hast – hier ist für jeden was dabei. Los geht’s!

Was ist ein Farbverlauf überhaupt?

Ein Farbverlauf – oder auf Englisch „Gradient“ – ist ein stufenloser Übergang zwischen zwei oder mehr Farben. Statt einer harten Kante berechnet dein Browser für jeden Pixel einen Farbwert zwischen den sogenannten Farbstopps (Color Stops). Das Ergebnis ist ein weicher, fließender Übergang, der deinem Design Tiefe und Dimension verleiht.

Technisch gesehen ist ein Gradient in CSS ein <image>-Datentyp. Er hat keine feste Größe, sondern füllt immer den verfügbaren Raum seines Containers. Du kannst ihn überall einsetzen, wo CSS ein Bild erwartet – vor allem als background-image.

Die Qualität deines Farbverlaufs hängt maßgeblich davon ab, in welchem Farbraum die Interpolation stattfindet. Aber dazu gleich mehr.

Die verschiedenen Arten von Farbverläufen

Nicht jeder Gradient ist gleich. Je nachdem, welchen Effekt du erzielen willst, hast du verschiedene Typen zur Auswahl.

Linearer Farbverlauf (Linear Gradient)

Der Klassiker unter den Gradients. Die Farben wechseln entlang einer geraden Linie – horizontal, vertikal oder in einem beliebigen Winkel. Stell dir eine unsichtbare Achse vor, entlang der sich die Farben verändern. Alle Pixel, die senkrecht zu dieser Achse auf gleicher Höhe liegen, haben denselben Farbwert. Ein linearer Farbverlauf ist perfekt für Hintergründe, Buttons und subtile Tiefeneffekte.

Radialer Farbverlauf (Radial Gradient)

Hier strahlen die Farben von einem Mittelpunkt nach außen – entweder kreisförmig oder elliptisch. Radiale Verläufe eignen sich hervorragend, um räumliche Tiefe zu erzeugen oder einen Spotlight-Effekt zu simulieren. Denk an einen Lichtstrahl, der auf eine Fläche fällt.

Konischer Farbverlauf (Conic Gradient)

Der Exot in der Gradient-Familie! Beim konischen Verlauf wandern die Farben im Kreis um einen Mittelpunkt herum – wie ein Uhrzeiger über ein Zifferblatt. Das macht ihn ideal für Farbräder, Tortendiagramme oder Ladeanimationen. Conic Gradients werden von allen modernen Browsern unterstützt.

Mesh-Gradient

Der Superstar der modernen Gradient-Welt! Bei einem Mesh-Gradient werden Farben auf einem zweidimensionalen Gitter von Kontrollpunkten definiert. Die Interpolation erfolgt in alle Richtungen gleichzeitig, was diese organischen, fließenden Farbübergänge erzeugt, die du von Seiten wie Stripe kennst.

Kleiner Haken: Es gibt noch keine native CSS-Syntax dafür. Es existiert ein Proposal bei der CSS Working Group für eine freeform-gradient()-Funktion, aber bis das implementiert ist, musst du Mesh-Effekte über überlagerte radiale Verläufe simulieren. Tools wie csshero.org/mesher helfen dir dabei.

Farbräume: Warum OKLCH alles verändert

Jetzt wird’s spannend – und ehrlich gesagt auch ein bisschen technisch. Aber bleib dran, denn dieses Wissen macht den Unterschied zwischen einem mittelmäßigen und einem großartigen Farbverlauf!

Die entscheidende Frage bei jedem Gradient: In welchem Farbraum findet die Interpolation statt? Das klingt abstrakt, hat aber dramatische Auswirkungen auf das Ergebnis.

Das Problem mit sRGB

Standardmäßig berechnet dein Browser Farbverläufe im sRGB-Farbraum. Die drei Kanäle (Rot, Grün, Blau) werden unabhängig voneinander interpoliert. Und hier liegt das Problem: sRGB ist nicht dafür gebaut, die menschliche Farbwahrnehmung abzubilden.

Das Ergebnis? Die berüchtigten „Muddy Middles“ – entsättigte, grau-braune Farben in der Mitte deines Verlaufs. Besonders bei komplementären Farben. Ein Verlauf von Blau nach Gelb in sRGB ergibt in der Mitte reines Grau. Der Verlauf wirkt ausgewaschen.

Wie Josh Comeau erklärt: Alle drei RGB-Kanäle konvergieren gegen ihren Mittelwert 127,5. Das Resultat ist schlicht Grau.

OKLCH – Der Durchbruch

Die Lösung heißt OKLCH, entwickelt 2020 von Björn Ottosson. OKLCH steht für Lightness (Helligkeit), Chroma (Farbigkeit) und Hue (Farbton) – und ist perzeptuell gleichmäßig. Gleiche numerische Schritte erzeugen gleich wahrgenommene Farbunterschiede.

Da OKLCH ein polarer Farbraum ist, folgt die Interpolation einem Bogen um das Farbrad, statt quer durch das entsättigte Zentrum zu schneiden. Der Blau-nach-Gelb-Verlauf durchläuft in OKLCH lebendige Türkis- und Grüntöne statt Grau.

Evil Martians bringt es auf den Punkt: OKLCH hat weder den gräulichen Bereich wie sRGB noch die Blau-zu-Lila-Verschiebung von Lab. Und: Alle modernen Browser unterstützen OKLCH bereits!

Kurzer Vergleich der Farbräume

CSS-Gradients: Syntax und Code-Beispiele

Genug Theorie – lass uns coden! Die Syntax ist logisch aufgebaut und schnell gelernt.

Linearer Gradient

/* Von oben nach unten (Standard) */
background: linear-gradient(red, blue);

/* Von links nach rechts */
background: linear-gradient(to right, #667eea, #764ba2);

/* Diagonal im 45-Grad-Winkel */
background: linear-gradient(45deg, #ee7752, #e73c7e);

/* Mit OKLCH – sofort bessere Ergebnisse! */
background: linear-gradient(in oklch to right, blue, yellow);

Zur Orientierung: 0deg geht von unten nach oben, 90deg von links nach rechts, 180deg von oben nach unten. Die Werte rotieren im Uhrzeigersinn.

Radialer Gradient

/* Kreisförmig */
background: radial-gradient(circle, #667eea, #764ba2);

/* Elliptisch, Ursprung oben links */
background: radial-gradient(ellipse at top left, #667eea, #764ba2);

/* In OKLCH für lebendige Farben */
background: radial-gradient(in oklch, circle, #de72c6, #2dcde4);

Konischer Gradient

/* Farbrad-Effekt */
background: conic-gradient(red, yellow, green, blue, red);

/* Tortendiagramm mit harten Kanten */
background: conic-gradient(
  #FF5722 0deg 126deg,
  #FFEB3B 126deg 216deg,
  #2196F3 216deg
);

Moderne CSS-Features für Farbverläufe

CSS entwickelt sich ständig weiter. In den letzten Jahren sind einige richtig coole Features dazugekommen.

Gradient-Interpolation mit in <colorspace>

Das wichtigste neue Feature überhaupt! Mit einem simplen Zusatz wechselst du den Farbraum:

/* OKLCH-Interpolation – nur zwei Wörter mehr! */
background: linear-gradient(in oklch to right, red, blue);

/* Regenbogen-Effekt mit longer hue */
background: linear-gradient(in oklch longer hue to right, red, red);

Laut caniuse.com liegt die globale Unterstützung für OKLCH bei rund 91%.

Hue-Interpolation in polaren Farbräumen

In OKLCH kontrollierst du, wie der Browser den Farbkreis durchquert:

• shorter hue (Standard) – nimmt den kürzesten Weg über den Farbkreis
• longer hue – nimmt den längeren Bogen, was mehr Farbvielfalt erzeugt
• increasing hue – immer im Uhrzeigersinn
• decreasing hue – immer gegen den Uhrzeigersinn

Besonders longer hue ist genial: Damit erzeugst du aus nur zwei Farben einen kompletten Regenbogen!

color-mix() – Farben dynamisch mischen

/* 50/50-Mischung in OKLCH */
color: color-mix(in oklch, blue 70%, red 30%);

/* Aufhellung deiner Markenfarbe für Hover */
:root { --brand: #2563eb; }
.button:hover {
  background-color: color-mix(in srgb, var(--brand) 85%, white);
}

@property für animierbare Gradients

Normalerweise kann CSS keine Farbverläufe direkt animieren. Aber mit @property registrierst du Custom Properties mit definiertem Typ, und der Browser kann sie interpolieren:

@property --color-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: #e73c7e;
}

.animated-gradient {
  background: linear-gradient(135deg, var(--color-1), var(--color-2));
  animation: colorShift 4s ease-in-out infinite alternate;
}

Browser-Kompatibilität

Fallback-Strategie

/* Kaskaden-Fallback */
.element {
  background: linear-gradient(to right, #de72c6, #2dcde4);          /* sRGB-Fallback */
  background: linear-gradient(in oklch to right, #de72c6, #2dcde4); /* OKLCH-Override */
}

Design-Theorie: Welche Farbkombinationen funktionieren?

Analoge Farben – die sicherste Wahl

Farben, die auf dem Farbrad nebeneinander liegen (z.B. Blau, Türkis, Grün), erzeugen die harmonischsten Verläufe. Die Farbtonverschiebung ist gering, der Übergang wirkt natürlich. Schau dir einen Sonnenuntergang an – das ist ein analoger Verlauf in Perfektion!

Monochromatische Verläufe – elegant und minimalistisch

Variationen eines einzigen Farbtons in Helligkeit und Sättigung sind immer harmonisch. Von Königsblau zu Türkis, von tiefem Weinrot zu zartem Rosa – monochromatische Verläufe sind der Geheimtipp für elegante Designs.

Komplementärfarben – mit Vorsicht genießen

Farben, die sich auf dem Farbrad gegenüberliegen, erzeugen maximalen Kontrast – aber auch das größte Risiko für Muddy Middles. Wenn du mehr über Komplementärfarben im Webdesign erfahren möchtest, findest du dort alle Details. Die Lösung: OKLCH verwenden!

Wie viele Farben sind ideal?

Die Faustregel: 2–3 Farben sind der Sweet Spot für Standard-Verläufe. Bei Mesh-Gradients kannst du auf 4–5 gehen. Instagrams 5-Farben-Palette funktioniert durch Format und Markenbekanntheit – für die meisten Projekte ist das aber zu viel.

Tiefe und Dimension durch Farbverläufe

Farbverläufe sind dein mächtigstes Werkzeug, um auf einem flachen Bildschirm Dreidimensionalität zu erzeugen. Sie simulieren, wie Licht auf Oberflächen fällt.

Ein heller-zu-dunkler-Übergang von oben nach unten lässt ein Element aussehen, als würde es von oben beleuchtet – unser Gehirn interpretiert das automatisch als räumliche Tiefe. Vertikale Verläufe wirken natürlich wie Himmel und Erde. Horizontale suggerieren Fortschritt. Diagonale wirken dynamisch und energiegeladen.

Subtile Farbverläufe eignen sich für Hintergründe, die Wärme erzeugen, ohne mit dem Content zu konkurrieren. Perfekt für SaaS-Dashboards oder professionelle Tools. Intensive Farbverläufe sind deine Waffe für Hero-Sections, CTAs und Branding.

Aktuelle Trends bei Farbverläufen

Mesh-Gradients

Der dominierende Trend schlechthin. Diese organischen Farbübergänge sind mit Standard-CSS nicht nativ möglich. Stripe hat mit seiner MiniGL-Implementierung den Goldstandard gesetzt.

Aurora-Gradients

Benannt nach dem Nordlicht, mischen Aurora-Gradients Farben in organischen, fließenden Mustern mit pastelligen Paletten. Technisch werden sie durch mehrere div-Elemente mit extremen Blur-Filtern (filter: blur(60px)) simuliert.

Glassmorphism und Liquid Glass

Apple hat mit „Liquid Glass“ auf der WWDC 2025 einen prägenden Trend vorgestellt – transluzentes Material mit Echtzeit-Rendering. Farbige Gradient-Hintergründe „scheinen“ durch das Glas und erzeugen raffinierte Tiefe.

Grainy Gradients

Rausch-Texturen über Verläufen verleihen Authentizität und nostalgische Ästhetik. Die Technik nutzt SVG feTurbulence-Filter für Perlin-Noise. CSS-Tricks hat dazu einen exzellenten Artikel.

Praktische Anwendungen mit CSS-Code

Hero-Section mit Gradient-Hintergrund

Die Hero-Section ist der perfekte Ort für einen auffälligen Farbverlauf:

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Gradient-Buttons mit Hover-Effekt

Buttons mit Farbverläufen können deine Conversion Optimierung unterstützen:

.btn-gradient {
  padding: 12px 32px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  background-size: 200% 200%;
  transition: background-position 0.4s ease;
}
.btn-gradient:hover {
  background-position: right center;
}

Gradient-Text

Gradient-Text kann ein starkes Designelement sein, besonders für Überschriften. Achte auf die richtige Schriftart:

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

Die besten Gradient-Tools

Du musst das Rad nicht jedes Mal neu erfinden. Es gibt verdammt gute Tools. Eine vollständige Übersicht findest du in unserem Artikel über Farb-Tools – hier die besten speziell für Gradients:

gradient.style – Das Werkzeug für moderne Farbverläufe. Unterstützt 8 Farbräume, HDR und Hue-Interpolation. Wenn du nur ein Tool brauchst, wähle dieses.

cssgradient.io – Einfach, schnell und gut dokumentiert. Über 1.000 Verläufe in der Gallery plus hilfreiche Tutorials. Mein Go-to für schnelle CSS-Gradients.

webgradients.com – 180 polierte Verläufe, exportierbar als CSS, Sketch und PSD. Open Source und kostenlos.

Mesh-Gradient-Generatoren

• meshgradient.in – 4-Farben-System, PNG-Export, kostenlos
• csshero.org/mesher – Generiert Mesh-Gradients als reinen CSS-Code
• whatamesh.vercel.app – Stripe-Style animierte Mesh-Gradients

Barrierefreiheit bei Farbverläufen

Das Thema wird bei Gradients leider oft ignoriert – dabei ist es enorm wichtig!

Die WCAG-Regeln sind klar: Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5:1, großer Text mindestens 3:1. Alles Wichtige zu Farbkontrasten und WCAG-Anforderungen findest du im separaten Artikel. Bei Gradient-Hintergründen musst du den Kontrast an der schwächsten Stelle testen – nicht am Durchschnitt!

5-Punkte-Testmethode

Prüfe den Kontrast an beiden Endpunkten, am Mittelpunkt und an den beiden Viertelpunkten des Verlaufs. Nur wenn alle fünf Punkte bestehen, ist dein Gradient barrierefrei.

Rund 300 Millionen Menschen weltweit sind von Farbenblindheit betroffen. Teste deine Farbverläufe mit Color Oracle!

Häufige Fehler vermeiden

Banding: Sichtbare Stufen im Verlauf

Banding entsteht durch die 8-Bit-Farbtiefe typischer Displays. Besonders betroffen sind dunkle Verläufe und große Flächen. Die gute Nachricht: Chrome, Safari und Firefox dithern Gradients automatisch. Falls du trotzdem Banding siehst, hilft ein SVG-Noise-Overlay.

Wenn du dich mit Farbschemata im Webdesign beschäftigst, lernst du schnell, welche Kombinationen funktionieren.

Häufig gestellte Fragen zu Farbverläufen

Fazit: Farbverläufe richtig einsetzen

Farbverläufe haben sich von einem simplen Deko-Element zu einem der mächtigsten Werkzeuge im modernen Webdesign entwickelt. Die OKLCH-Interpolation hat das Spiel fundamental verändert – mit nur zwei zusätzlichen Wörtern (in oklch) verschwinden die Muddy Middles.

Drei Kernprinzipien: Erstens, verwende OKLCH mit sRGB-Fallback. Zweitens, animiere background-position statt Farbwerte. Drittens, teste Barrierefreiheit an der schwächsten Stelle.

Wenn du dich für aktuelle Webdesign Trends interessierst, wirst du feststellen, dass Farbverläufe dort eine zentrale Rolle spielen. Und für die komplette Übersicht über Farben im Webdesign schau dir unseren Farbenlehre-Leitfaden an.