CSS-Gradient-Leitfaden: Lineare, radiale und konische Muster

CSS-Verläufe erzeugen sanfte Übergänge zwischen Farben ohne Bilder, was zu null HTTP-Anfragen, unendlicher Skalierbarkeit und winzigen Dateigrößen führt. Modernes CSS unterstützt drei Verlaufstypen, jeder mit leistungsstarken Konfigurationsoptionen. Dieser Leitfaden behandelt alle mit praktischen Beispielen, die Sie sofort verwenden können.

Lineare Verläufe

Der häufigste Typ, der entlang einer geraden Linie übergeht:

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

/* Mit Winkel */
background: linear-gradient(135deg, #3B82F6, #8B5CF6);

/* Mit Richtungsschlüsselwörtern */
background: linear-gradient(to right, #3B82F6, #8B5CF6);
background: linear-gradient(to bottom right, #3B82F6, #8B5CF6);

Farbstopps

Steuern Sie, wo jede Farbe erscheint:

/* Gleichmäßige Verteilung (Standard) */
background: linear-gradient(#3B82F6, #8B5CF6, #EC4899);

/* Benutzerdefinierte Positionen */
background: linear-gradient(#3B82F6 0%, #8B5CF6 30%, #EC4899 100%);

/* Harter Stopp (kein Übergang) */
background: linear-gradient(#3B82F6 50%, #8B5CF6 50%);

Mehrfach-Stopp-Verläufe

Erstellen Sie komplexe Farbübergänge:

/* Sonnenuntergang-Verlauf */
background: linear-gradient(
  to right,
  #1E3A5F 0%,
  #FF6B35 30%,
  #FFC947 50%,
  #FF6B35 70%,
  #1E3A5F 100%
);

/* Regenbogen */
background: linear-gradient(
  90deg,
  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%)
);

Erstellen Sie lineare Verläufe visuell mit unserem Gradient-Generator — passen Sie Farben, Winkel und Stopps in Echtzeit an.

Radiale Verläufe

Strahlen von einem Mittelpunkt nach außen:

/* Kreis vom Zentrum */
background: radial-gradient(circle, #3B82F6, #1E3A8A);

/* Ellipse (Standardform) */
background: radial-gradient(ellipse, #3B82F6, #1E3A8A);

/* Benutzerdefinierte Position */
background: radial-gradient(circle at top left, #3B82F6, #1E3A8A);
background: radial-gradient(circle at 25% 75%, #3B82F6, #1E3A8A);

Größenschlüsselwörter

/* closest-side: Verlauf erreicht nächste Kante */
background: radial-gradient(circle closest-side at 25% 50%, #3B82F6, #1E3A8A);

/* farthest-corner: Verlauf erreicht entfernteste Ecke (Standard) */
background: radial-gradient(circle farthest-corner, #3B82F6, #1E3A8A);

/* Explizite Größe */
background: radial-gradient(circle 200px at center, #3B82F6, #1E3A8A);

Konische Verläufe

Drehen sich um einen Mittelpunkt wie ein Tortendiagramm:

/* Einfacher konischer Verlauf */
background: conic-gradient(#3B82F6, #8B5CF6, #EC4899, #3B82F6);

/* Tortendiagramm-Segmente */
background: conic-gradient(
  #3B82F6 0deg 120deg,
  #8B5CF6 120deg 240deg,
  #EC4899 240deg 360deg
);

/* Von bestimmtem Winkel */
background: conic-gradient(from 45deg, #3B82F6, #8B5CF6, #3B82F6);

/* Benutzerdefiniertes Zentrum */
background: conic-gradient(from 0deg at 25% 50%, #3B82F6, #8B5CF6, #3B82F6);

Sich wiederholende Verläufe

Alle drei Typen unterstützen sich wiederholende Muster:

/* Streifenmuster */
background: repeating-linear-gradient(
  45deg,
  #3B82F6 0px,
  #3B82F6 10px,
  transparent 10px,
  transparent 20px
);

/* Konzentrische Ringe */
background: repeating-radial-gradient(
  circle,
  #3B82F6 0px,
  #3B82F6 5px,
  #1E3A8A 5px,
  #1E3A8A 10px
);

/* Schachbrettmuster (mit konisch) */
background: repeating-conic-gradient(
  #E5E7EB 0% 25%,
  #F9FAFB 0% 50%
);
background-size: 40px 40px;

Überlagern mehrerer Verläufe

CSS unterstützt mehrere Hintergründe und ermöglicht komplexe Effekte:

/* Verlaufsüberlagerung auf Bild */
background:
  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)),
  url('hero.jpg');

/* Kreuzschraffur-Muster */
background:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  ),
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  );

Praktische UI-Muster

Verlaufstext

.gradient-text {
  background: linear-gradient(135deg, #3B82F6, #EC4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Verlaufsrahmen

.gradient-border {
  border: 3px solid transparent;
  background-image:
    linear-gradient(white, white),
    linear-gradient(135deg, #3B82F6, #EC4899);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

Animierter Verlaufshintergrund

.animated-gradient {
  background: linear-gradient(-45deg, #3B82F6, #8B5CF6, #EC4899, #F59E0B);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Leistungsaspekte

Verläufe sind GPU-beschleunigt und performant:

Verläufe rendern schneller als gleichwertige Bilder
background-size beeinflusst die Renderkosten — kleinere Kacheln sind günstiger
Vermeiden Sie die direkte Animation von Verlaufsfarben — animieren Sie stattdessen background-position
Komplexe Verläufe mit vielen Stopps sind immer noch schneller als PNGs

Browser-Unterstützung

Alle modernen Browser unterstützen lineare, radiale und konische Verläufe. Konische Verläufe sind die neuesten, unterstützt seit 2020 in allen großen Browsern (Chrome 69+, Firefox 83+, Safari 12.1+). Für keinen Verlaufstyp sind Vendor-Präfixe erforderlich.

FAQ

Wie erstelle ich einen sanften Verlauf zwischen zwei Farben, die trüb aussehen?

Trübe Verläufe entstehen beim Übergang zwischen Farben, die auf dem Farbkreis durch Grau verlaufen. Lösungen: Fügen Sie einen mittleren Farbstopp in einem helleren Farbton hinzu, verwenden Sie den oklch-Farbraum (linear-gradient(in oklch, ...)) für wahrnehmungsgleichmäßige Übergänge, oder erhöhen Sie die Sättigung der Mittelfarbe.

Können Verläufe Bilder für Hintergründe ersetzen?

Für abstrakte Muster, Überlagerungen und dekorative Hintergründe — absolut. Verläufe haben null Ladezeit, skalieren perfekt und benötigen keine HTTP-Anfragen. Für komplexe Visualisierungen oder Fotografien sind Bilder weiterhin nötig. Viele moderne Designs kombinieren beides: eine Verlaufsüberlagerung auf einem Hintergrundbild.