CSS-Verlauf-Leitfaden: Lineare, radiale und konische Verläufe

CSS-Verläufe ermöglichen es, glatte Übergänge zwischen zwei oder mehr Farben direkt im Browser zu erstellen, ohne eine einzige Bildanforderung. In CSS3 eingeführt und jetzt universell unterstützt, haben sich Verläufe von einfachen Zweistopp-Übergängen zu ausgefeilten visuellen Elementen entwickelt, die Texturen, geometrische Muster und Tiefeneffekte erzeugen können. Dieser Leitfaden behandelt jeden CSS-Verlaufstyp, erklärt die Syntax im Detail und zeigt praktische Hex-Code-Beispiele, die Sie direkt in Ihre Stylesheets einfügen können.

Was ist ein CSS-Verlauf?

Ein CSS-Verlauf ist ein besonderer <image>-Wert. Er erzeugt einen Farbübergang programmgesteuert, was bedeutet, dass der Browser die Zwischenfarben zwischen Ihren definierten Farbstopps berechnet. Da Verläufe Bilder und keine Farben sind, wenden Sie sie mit background-image oder der Kurzform background an – nicht mit background-color.

Die drei Verlaufstypen in CSS sind:

• linear-gradient() — Farben gehen entlang einer geraden Linie über
• radial-gradient() — Farben strahlen von einem Mittelpunkt aus nach außen
• conic-gradient() — Farben rotieren um einen Mittelpunkt

Jeder Typ hat auch eine repeating-*-Variante (repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient()), die das Verlaufsmuster über das Element kachelt.

Lineare Verläufe

Ein linearer Verlauf zeichnet einen Farbübergang entlang einer geraden Linie in einem bestimmten Winkel.

Grundlegende Syntax

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Der Parameter direction ist optional. Ohne ihn fließt der Verlauf von oben nach unten (entspricht to bottom oder 180deg).

/* Von oben nach unten (Standard) */
background: linear-gradient(#3B82F6, #1E3A8A);

/* Von links nach rechts */
background: linear-gradient(to right, #3B82F6, #1E3A8A);

/* Diagonal */
background: linear-gradient(to bottom right, #3B82F6, #1E3A8A);

Winkel-Syntax

Winkel werden in Grad im Uhrzeigersinn von oben gemessen. 0deg zeigt nach oben, 90deg nach rechts, 180deg nach unten.

/* 45-Grad-Diagonale von unten-links nach oben-rechts */
background: linear-gradient(45deg, #FF6B6B, #FFC300);

/* 135-Grad-Diagonale von oben-links nach unten-rechts */
background: linear-gradient(135deg, #667EEA, #764BA2);

Ein häufiger Anwendungsfall ist ein Hero-Abschnittshintergrund. Zum Beispiel erzeugt ein Verlauf von #667EEA zu #764BA2 bei 135 Grad eine kühle lila Diagonale, die gut hinter weißem Text wirkt.

Richtungs-Keywords

Statt Winkel können Sie Richtungs-Keywords verwenden:

Keywords sind bei Code-Reviews lesbarer und selbstdokumentierend. Reservieren Sie explizite Grad für präzise Winkel, die nicht auf einer Diagonale liegen.

Mehrere Farbstopps

Farbstopps definieren, wo jede Farbe entlang der Verlaufslinie beginnt und endet. Sie können jede CSS-Länge oder Prozentsatz als Position verwenden.

/* Dreistopp-Verlauf */
background: linear-gradient(to right, #FF6B6B, #FFD93D, #6BCB77);

/* Positionierte Stopps */
background: linear-gradient(to right,
  #FF6B6B 0%,
  #FFD93D 50%,
  #6BCB77 100%
);

/* Harter Farbstopp (kein Übergang) */
background: linear-gradient(to right,
  #FF6B6B 0%,
  #FF6B6B 50%,
  #6BCB77 50%,
  #6BCB77 100%
);

Die Technik des harten Farbstopps – das Setzen zweier Stopps an derselben Position – erzeugt eine scharfe Kante zwischen Farben ohne Überblendung. Das ist nützlich für flaggenartige Designs, Fortschrittsanzeigen oder geteilte Hintergründe.

Farbstopp mit Hinweisen

CSS unterstützt einen Mittelpunkt-Hinweis zwischen zwei Farbstopps, der Ihnen die Kontrolle darüber gibt, wo die Interpolation am schnellsten oder langsamsten ist:

/* Verlauf verweilt länger im Blaubereich */
background: linear-gradient(to right, #3B82F6, 30%, #EF4444);

Der 30%-Hinweis teilt dem Browser mit, dass der Mittelpunkt des Übergangs zwischen Blau #3B82F6 und Rot #EF4444 bei der 30%-Marke liegen soll, sodass Blau länger anhält und Rot schnell erscheint.

Radiale Verläufe

Ein radialer Verlauf strahlt von einem Mittelpunkt nach außen und erzeugt kreisförmige oder elliptische Muster.

Grundlegende Syntax

background: radial-gradient(shape size at position, color-stop1, color-stop2);

Alle Parameter sind optional. Der Standard erzeugt einen elliptischen Verlauf, der im Element zentriert ist und bis zur entferntesten Ecke reicht.

/* Einfacher zentrierter Radialverlauf */
background: radial-gradient(#FFF176, #F57F17);

/* Expliziter Kreis */
background: radial-gradient(circle, #A8E063, #2D6A4F);

Form

Radiale Verläufe können circle (gleichmäßiger Radius) oder ellipse (Standard, passt sich an das Element an) sein.

/* Kreis: gleicher Radius in alle Richtungen */
background: radial-gradient(circle, #FF9A9E, #A18CD1);

/* Ellipse: passt sich an Elementabmessungen an */
background: radial-gradient(ellipse, #FF9A9E, #A18CD1);

Größen-Keywords

Die Größe steuert, wie weit der Verlauf reicht:

/* Kleiner Scheinwerfer oben-links */
background: radial-gradient(circle closest-side at 25% 25%,
  rgba(255,255,255,0.8),
  transparent
);

Position

Das at-Keyword legt den Mittelpunkt des Verlaufs mit einem beliebigen gültigen CSS-Positionswert fest:

/* Exzentrischer Verlauf für einen Lichteffekt */
background: radial-gradient(circle at 70% 30%, #FFE066, #FF6B6B, #2D3561);

/* Scheinwerfer-Unterseite zentriert */
background: radial-gradient(ellipse at 50% 100%, #667EEA, #1a1a2e);

Das dezentrale Positionieren von Verläufen erzeugt den Eindruck einer Lichtquelle, was eine gängige Technik bei Glassmorphismus und Tiefeneffekten ist.

Konische Verläufe

Ein konischer Verlauf dreht Farben um einen Mittelpunkt, ähnlich wie ein Tortendiagramm gezeichnet wird. Er wurde CSS später als die anderen Typen hinzugefügt, wird aber jetzt vollständig unterstützt.

Grundlegende Syntax

background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);

/* Einfacher konischer Verlauf */
background: conic-gradient(#FF6B6B, #FFD93D, #6BCB77, #4D96FF, #FF6B6B);

/* Startet bei 90 Grad */
background: conic-gradient(from 90deg, #FF6B6B, #FFD93D, #6BCB77);

Tortendiagramme mit konischen Verläufen

Konische Verläufe eignen sich ideal für reine CSS-Tortendiagramme:

/* Tortendiagramm: 40% Rot, 35% Blau, 25% Grün */
background: conic-gradient(
  #EF4444 0deg 144deg,
  #3B82F6 144deg 270deg,
  #22C55E 270deg 360deg
);
border-radius: 50%;

Die Berechnung ist einfach: Multiplizieren Sie den Prozentsatz mit 3,6 für Grad (40% × 3,6 = 144deg).

Farbräder mit konischen Verläufen

Ein vollständiger konischer Verlauf, der alle Farbtöne durchläuft, recreiert ein Farbrad:

background: conic-gradient(
  hsl(0, 100%, 50%),
  hsl(60, 100%, 50%),
  hsl(120, 100%, 50%),
  hsl(180, 100%, 50%),
  hsl(240, 100%, 50%),
  hsl(300, 100%, 50%),
  hsl(360, 100%, 50%)
);
border-radius: 50%;

Schachbrett- und Streifenmuster

Die Variante repeating-conic-gradient() erzeugt geometrische Muster:

/* Schachbrett */
background: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%);
background-size: 40px 40px;

Wiederholende Verläufe

Jeder Verlaufstyp hat eine wiederholende Variante, die das definierte Muster kontinuierlich kachelt:

/* Diagonale Streifen */
background: repeating-linear-gradient(
  45deg,
  #F3F4F6,
  #F3F4F6 10px,
  #E5E7EB 10px,
  #E5E7EB 20px
);

/* Konzentrische Ringe */
background: repeating-radial-gradient(
  circle,
  #3B82F6,
  #3B82F6 10px,
  transparent 10px,
  transparent 30px
);

Wiederholende Verläufe eignen sich effizient für Textureffekte – Wasserzeichen-ähnliche Diagonallinien auf Hintergründen oder konzentrische Ringe für eine Zielscheiben-Ästhetik.

Transparenz in Verläufen

Das Verwenden von transparent oder rgba()-Werten in Verläufen erzeugt Ein- und Ausblendeffekte:

/* Unten ausblenden (darunter liegender Inhalt bleibt sichtbar) */
background: linear-gradient(to bottom,
  #1E3A8A 0%,
  rgba(30, 58, 138, 0) 100%
);

/* Vignetten-Overlay */
background: radial-gradient(ellipse at center,
  transparent 60%,
  rgba(0, 0, 0, 0.5) 100%
);

Beachten Sie, dass transparent in CSS rgba(0,0,0,0) ist – vollständig transparentes Schwarz –, was beim Übergang von einem farbigen Wert zu unerwarteten grauen Bändern führen kann. Um das zu vermeiden, verwenden Sie die vollständig transparente Version Ihrer Farbe:

/* Korrekt: transparente Version des Blaus */
background: linear-gradient(to right, #3B82F6, rgba(59, 130, 246, 0));

/* Falsch: erzeugt Graubänder */
background: linear-gradient(to right, #3B82F6, transparent);

Mehrere Verläufe schichten

Die Eigenschaft background akzeptiert mehrere kommagetrennte Werte. Jeder Verlauf wird auf dem vorherigen gestapelt:

/* Diagonales Overlay auf einer Vollfarbe */
background:
  linear-gradient(135deg, rgba(255,107,107,0.3) 0%, transparent 50%),
  linear-gradient(to bottom, #1E3A8A, #2D6A9F);

/* Simuliertes Rauschen durch Verläufe */
background:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  ),
  linear-gradient(135deg, #667EEA, #764BA2);

Geschichtete Verläufe reduzieren HTTP-Anfragen, die sonst mehrere Hintergrundbilder erfordern würden, und geben Ihnen volle CSS-Kontrolle über Farben und Abmessungen.

CSS-Verlauf-Performance

Verläufe werden von der GPU berechnet und sind generell effizient. Einige Muster sollten jedoch in leistungssensiblen Kontexten vermieden werden:

• Animierte Verläufe: CSS kann nicht zwischen zwei verschiedenen background-image-Werten übergehen. Das Animieren von Verläufen erfordert entweder das Ändern von CSS Custom Properties (Variablen) oder JavaScript. Eine Problemumgehung ist das Animieren von background-position bei einem größeren Verlauf.
• Komplexe wiederholende Muster: Sehr kleine Wiederholungsgrößen (unter 2px) auf großen Elementen zwingen den Browser, Tausende von Pixeln an Verlauf zu berechnen, was Render-Performance-Probleme verursachen kann.
• Vermeiden Sie filter: blur() auf Verlaufshintergründen während der Animation – das ist GPU-intensiv und verursacht Ruckler.

Für Verlaufsanimationen bieten CSS Custom Properties mit @property hardwarebeschleunigte flüssige Übergänge:

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.animated-gradient {
  background: linear-gradient(var(--gradient-angle), #667EEA, #764BA2);
  animation: rotate-gradient 4s linear infinite;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

Verwendung des Verlaufsgenerators

Das manuelle Schreiben von Verläufen ist wertvoll für das Verständnis der Syntax, aber der Verlaufsgenerator beschleunigt den Prozess erheblich. Sie können:

• Start- und Endfarben mit einem visuellen Farbwähler oder durch direkte Eingabe von Hex-Codes auswählen
• Den Verlaufswinkel mit einem Schieberegler oder numerischer Eingabe einstellen
• Mehrere Farbstopps an präzisen Positionen hinzufügen
• Den Verlauf in Echtzeit über verschiedene Elementgrößen vorschauen
• Das fertige CSS mit einem Klick kopieren

Um beispielsweise einen Sonnenuntergangs-Verlauf zu erstellen, geben Sie #FF6B6B als Startfarbe, #FFC300 bei 50% und #FF3C00 als Ende ein, dann setzen Sie den Winkel auf 135 Grad. Der Generator erzeugt sofort einsatzfähiges CSS, das Sie direkt in Ihr Stylesheet einfügen können.

Kombinieren Sie den Generator mit dem Farbkonverter, wenn Sie mit HSL- oder OKLCH-Werten statt Hex arbeiten müssen – moderne Farbräume wie OKLCH erzeugen wahrnehmungsgleichmäßigere Verläufe, weil die Helligkeitsachse über alle Farbtöne hinweg wirklich gleichmäßig ist.

Praktische Verlaufsrezepte

Hero-Abschnittshintergrund

background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);

Tiefes Lila-Blau-Diagonal, geeignet für SaaS-Landingpages.

Karten-Hover-Effekt

background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

Subtiler hellblau-grauer Verlauf von #F5F7FA zu #C3CFE2.

Neonglühen-Schaltfläche

background: linear-gradient(to right, #11998e, #38ef7d);
box-shadow: 0 4px 15px rgba(56, 239, 125, 0.4);

Lebhaftes Grün von #11998E zu #38EF7D.

Dunkelmodus-Oberfläche

background: linear-gradient(145deg, #1E1E2E 0%, #2D2D44 100%);

Subtiles dunkles Lila-Blau für Dark-Mode-Kartenoberflächen.

Netz-Verlauf (mit Schichten angenähert)

background:
  radial-gradient(ellipse at 20% 20%, rgba(103,126,234,0.5), transparent 50%),
  radial-gradient(ellipse at 80% 80%, rgba(118,75,162,0.5), transparent 50%),
  radial-gradient(ellipse at 50% 50%, rgba(255,107,107,0.3), transparent 60%),
  #1a1a2e;

Wesentliche Erkenntnisse

• CSS bietet drei Verlaufstypen: linear-gradient() für geradlinige Übergänge, radial-gradient() für kreisförmige oder elliptische Muster und conic-gradient() für Tortendiagramm-ähnliche Rotationen um einen Mittelpunkt.
• Jeder Typ hat eine repeating-*-Variante, die das Verlaufsmuster kachelt – nützlich für Textureffekte, Streifen und geometrische Muster.
• Mehrere Farbstopps mit Prozentsatz- oder Pixelpositionen geben präzise Kontrolle darüber, wo Übergänge stattfinden; das Verwenden derselben Position für zwei Stopps erzeugt eine harte Kante ohne Überblendung.
• Verwenden Sie rgba() mit null Alpha (nicht das bloße transparent-Keyword), um Graubänder beim Ausblenden einer Farbe zu Transparenz zu vermeiden.
• Mehrere Verläufe können in einer einzigen background-Deklaration gestapelt werden, wobei jeder Verlauf auf dem vorherigen positioniert wird.
• Der Verlaufsgenerator ermöglicht es Ihnen, komplexe Verläufe visuell zu erstellen, mit Echtzeit-Vorschau und CSS-Export per Knopfdruck.