CSS Gradient Generator: Vollständiger Leitfaden für lineare und radiale Verläufe

CSS-Verläufe sind eines der mächtigsten visuellen Werkzeuge für Webdesigner — sie erzeugen weiche Farbübergänge ohne eine einzige Bilddatei, rendern in jeder Auflösung und können mit CSS-Transitions animiert werden. Viele Designer nutzen jedoch nur die Grundlagen: zwei Farben, eine Richtung.

Dieser Leitfaden behandelt das volle Spektrum der CSS-Verlaufsmöglichkeiten: die drei Verlaufstypen, erweiterte Farbstopps, Winkelnotation und kreative Techniken wie Mesh-Verläufe, Verlaufstext und Streifenhintergründe — plus Performance-Überlegungen und Best Practices.

Überblick CSS-Verlaufstypen

CSS bietet drei Verlaufsfunktionen. linear-gradient() erzeugt einen Übergang entlang einer geraden Linie. radial-gradient() erzeugt einen Übergang, der von einem Mittelpunkt ausstrahlt. conic-gradient() erzeugt einen Übergang, der um einen Mittelpunkt kreist wie ein Farbrad oder Kreisdiagramm. Alle drei werden als Werte für die background-image-Eigenschaft verwendet.

linear-gradient Syntax und Winkel

Die Grundsyntax: linear-gradient(Richtung, Farbe-1, Farbe-2, ...). Richtung kann ein Schlüsselwort (to bottom, to right) oder ein Winkel in Grad sein (0deg = aufwärts, 90deg = rechts, 180deg = abwärts). Das Winkelsystem verwendet Kompassmessung: 0deg zeigt nach oben, steigt im Uhrzeigersinn.

/* Äquivalente Deklarationen */
background: linear-gradient(to bottom, #3A7BD5, #00D2FF);
background: linear-gradient(180deg, #3A7BD5, #00D2FF);

/* Diagonal */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Multi-Stopp */
background: linear-gradient(
  to right,
  #f093fb 0%,
  #f5576c 50%,
  #4facfe 100%
);

Farbstopps und Übergänge

Farbstopps definieren, wo jede Farbe im Verlauf beginnt und endet. Ohne explizite Positionen werden Farben gleichmäßig verteilt. Zwei benachbarte Stopps an derselben Position erzeugen eine harte Kante (kein Übergang) — nützlich für Streifenhintergründe. Ein Farbhinweis (ein einzelner Wert zwischen zwei Stopps) verschiebt den Mittelpunkt des Übergangs.

/* Harte Stopps — Streifen */
background: linear-gradient(
  to right,
  #e74c3c 0% 33%,
  #3498db 33% 66%,
  #2ecc71 66% 100%
);

/* Transparentes Ausblenden */
background: linear-gradient(
  to bottom,
  rgba(0,0,0,0),
  rgba(0,0,0,0.8)
);

radial-gradient und conic-gradient

radial-gradient() strahlt von einem Mittelpunkt aus. Syntax: radial-gradient(Form Größe at Position, Farben). Form: circle oder ellipse. conic-gradient() dreht sich um einen Mittelpunkt: Farben sind über 360° verteilt. Nützlich für Kreisdiagramme, Farbräder und Rotationsmuster.

/* Radiales Spotlight */
background: radial-gradient(
  circle at center,
  #3A7BD5 0%,
  transparent 70%
);

/* Konisch — Farbrad */
background: conic-gradient(
  red, yellow, lime, cyan, blue, magenta, red
);

Kreative Verlaufstechniken

Verlaufstext: Verlauf auf background-image anwenden, dann background-clip: text und -webkit-background-clip: text mit color: transparent verwenden. Verlaufsrahmen: background mit padding-box und border-box Clipping oder border-image-Eigenschaft. Mesh-Verläufe: mehrere radiale Verläufe mit verschiedenen Positionen und Farben überlagern. Dunkelmodus-adaptive Verläufe: CSS Custom Properties innerhalb von Verlaufsfunktionen verwenden.

Performance und Best Practices

CSS-Verläufe werden GPU-composited und performen in den meisten Fällen gut. Vermeide das Animieren von Verläufen mit CSS-Transitions auf background-image — Browser können nicht zwischen Verläufen nativ interpolieren. Verwende stattdessen @property (CSS Houdini). Teste immer Verlaufsbarrierefreiheit: Text über Verlaufshintergründen muss WCAG-Kontrast an jedem Punkt des Verlaufs einhalten.

Häufig gestellte Fragen