CSS-Verlaufsgenerator: Schöne Farbverläufe erstellen, ohne Code zu schreiben

CSS-Farbverläufe gehören zu den leistungsstärksten und am wenigsten genutzten Werkzeugen im Werkzeugkasten des Frontend-Entwicklers. Mit ihnen können Sie weiche Farbübergänge, eindrucksvolle Hintergründe, subtilen UI-Feinschliff und sogar komplexe visuelle Muster erstellen — alles ohne eine einzige Bilddatei. Bevor CSS-Farbverläufe universell unterstützt wurden, mussten Designer Verlaufshintergründe als PNGs aus Photoshop exportieren, was zusätzliche HTTP-Anfragen, unflexible statische Assets und Layouts zur Folge hatte, die in dem Moment zerbrachen, in dem jemand die Markenfarben änderte. Heute ersetzt eine einzige Zeile CSS all das.

Dieser Leitfaden behandelt alles, was Sie über CSS-Farbverläufe wissen müssen — die drei Typen, das Winkelsystem, praxisnahe Anwendungsfälle mit kopierfertigem Code, häufige Fehler und wie Sie den BrowseryTools CSS-Verlaufsgenerator nutzen, um genau das zu erstellen, was Sie brauchen, ohne eine einzige Zeile von Grund auf zu schreiben.

Warum CSS-Farbverläufe bildbasierte Hintergründe abgelöst haben

Der alte Ansatz — das Exportieren eines 1×1000-px-Verlaufs-PNG und das horizontale Kacheln — hatte echte Kosten. Jeder Verlauf war ein Roundtrip zum Server, eine Bytes-auf-der-Leitung-Last und eine Wartungsbürde, wenn sich Farben änderten. Noch wichtiger: PNG-Verläufe konnten nicht dynamisch auf Bildschirmgrößen, Theme-Wechsel oder Hover-Zustände reagieren.

CSS-Farbverläufe lösen all das. Sie werden in Echtzeit von der GPU gerendert, reagieren sofort auf JavaScript-Zustandsänderungen, skalieren bei jeder Auflösung perfekt, funktionieren mit CSS-Übergängen und -Animationen und fügen Ihrem Asset-Bundle null Bytes hinzu. Die Browserunterstützung liegt nun bei 100 % über alle modernen Browser hinweg und ist es seit 2014. Es gibt keinen Grund, in neuen Projekten bildbasierte Verläufe für einfache Farbübergänge zu verwenden.

Die drei Arten von CSS-Farbverläufen

1. Linearer Verlauf

Ein linearer Verlauf lässt Farben entlang einer geraden Linie übergehen. Die Richtung kann ein beliebiger Winkel sein oder als Schlüsselwort wie to right oder to bottom right ausgedrückt werden. Das ist der am häufigsten verwendete Verlaufstyp und deckt den überwiegenden Großteil der Designbedürfnisse ab.

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

/* Top to bottom (default direction) */
background: linear-gradient(#f8fafc, #e2e8f0);

/* Left to right with three color stops */
background: linear-gradient(to right, #f97316, #ec4899, #8b5cf6);

2. Radialer Verlauf

Ein radialer Verlauf strahlt von einem Mittelpunkt nach außen. Standardmäßig bildet er eine Ellipse, die in das Begrenzungsrechteck des Elements passt, aber Sie können Form, Größe und Position steuern. Radiale Verläufe sind ideal für Spotlight-Effekte, leuchtende Schaltflächen und Simulationen von Umgebungslicht.

/* Circular glow from center */
background: radial-gradient(circle, #6366f1 0%, #1e1b4b 100%);

/* Ellipse glow at top-left corner */
background: radial-gradient(ellipse at top left, #fbbf24 0%, transparent 60%);

/* Positioned spotlight */
background: radial-gradient(circle at 30% 40%, #e0f2fe, #0284c7);

3. Konischer Verlauf

Ein konischer Verlauf führt Farben rund um einen Mittelpunkt, wie die Zeiger einer Uhr. Das macht ihn auf einzigartige Weise geeignet für Kreisdiagramme, Farbräder und Animationen von Lade-Spinnern. Er war der letzte der drei Verlaufstypen, der universelle Unterstützung erhielt, und landete bis 2021 in allen großen Browsern.

/* Pie chart with three segments */
background: conic-gradient(
  #6366f1 0deg 120deg,
  #ec4899 120deg 240deg,
  #f97316 240deg 360deg
);

/* Color wheel */
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%)
);

Das Winkelsystem für lineare Verläufe verstehen

Der Winkelparameter in linear-gradient folgt einer Konvention, die viele Entwickler überrascht, weil sie von standardmäßigen mathematischen Winkeln abweicht. Hier ist die Zuordnung:

• 0deg — von unten nach oben (der Verlauf fließt aufwärts)
• 90deg — von links nach rechts (der häufigste horizontale Verlauf)
• 135deg — diagonal, von oben links nach unten rechts
• 180deg — von oben nach unten (entspricht dem Standard ohne angegebenen Winkel)
• 225deg — diagonal, von unten rechts nach oben links
• 270deg — von rechts nach links

Die Schlüsselwort-Entsprechungen — to top, to right, to bottom left — sind für gängige Richtungen oft besser lesbar als numerische Winkel. Für präzise Diagonaleffekte geben Ihnen numerische Gradzahlen exakte Kontrolle. Der beliebte diagonale Verlauf von Lila nach Indigo verwendet 135deg:

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

Formen radialer Verläufe: Kreis vs. Ellipse

Standardmäßig erzeugt radial-gradient eine Ellipse, die so dimensioniert ist, dass sie in das Element passt. Sie können dies mit zwei Form-Schlüsselwörtern überschreiben:

• circle — erzwingt einen perfekten Kreis unabhängig vom Seitenverhältnis des Elements. Verwenden Sie dies für Leuchteffekte und Spotlight-Hintergründe, bei denen Sie ein gleichmäßiges radiales Auslaufen in alle Richtungen wünschen.
• ellipse — der Standard, dehnt sich aus, um in den Container zu passen. Verwenden Sie dies für subtile Hintergrundfüllungen, die sich natürlich an jede Elementform anpassen müssen.

Das Schlüsselwort at erlaubt es Ihnen, den Verlaufsmittelpunkt mithilfe jeder beliebigen CSS-Länge oder Prozentangabe an eine beliebige Stelle im Element zu verschieben. at center, at top left, at 20% 80% — alle sind gültig. Die Positionierung ist besonders mächtig, um außermittige Umgebungslichteffekte zu erzeugen:

/* Glow coming from upper-right corner */
background: radial-gradient(ellipse at top right, rgba(251,191,36,0.4), transparent 60%);

/* Multiple radial gradients layered */
background:
  radial-gradient(circle at 20% 30%, rgba(99,102,241,0.3), transparent 40%),
  radial-gradient(circle at 80% 70%, rgba(236,72,153,0.3), transparent 40%),
  #0f172a;

Konische Verläufe für Kreisdiagramme und Lade-Spinner

Die Fähigkeit des konischen Verlaufs, im Kreis zu führen, macht ihn zur nativen CSS-Lösung für zwei klassische UI-Komponenten, die zuvor SVG oder JavaScript erforderten:

Für einen Fortschrittsring kombinieren Sie einen konischen Verlauf mit einer kreisförmigen Maske. Für ein Kreisdiagramm entsprechen die Segmente des konischen Verlaufs direkt den Datenprozentsätzen. Ein Segment, das von 0deg bis 72deg reicht, repräsentiert genau 20 % eines vollen Kreises. Das macht die Übersetzung von Daten in CSS unkompliziert — multiplizieren Sie den Prozentsatz mit 3,6, um den Gradwert zu erhalten.

Verläufe mit mehreren Stopps und harte Stopps für Streifenmuster

Farbstopps müssen nicht weich ineinander übergehen. Wenn zwei benachbarte Stopps dieselbe Position teilen, wird der Übergang zwischen ihnen augenblicklich — ein harter Stopp. Mit dieser Technik erzeugen Sie Streifenmuster, Schachbrettmuster und linierte Hintergründe vollständig in CSS:

/* Candy stripe pattern using hard stops */
background: linear-gradient(
  45deg,
  #6366f1 25%,
  transparent 25%,
  transparent 50%,
  #6366f1 50%,
  #6366f1 75%,
  transparent 75%
);
background-size: 40px 40px;

/* Warning stripe — alternating color hard stops */
background: repeating-linear-gradient(
  -45deg,
  #fbbf24,
  #fbbf24 10px,
  #1e293b 10px,
  #1e293b 20px
);

Praxisnahe Anwendungsfälle mit Beispielcode

Hintergründe für Hero-Bereiche

Ein linearer Verlauf mit mehreren Stopps und einem Geflecht aus zwei radialen Highlights verleiht Hero-Bereichen die Tiefe einer maßgeschneiderten Illustration ohne jegliche Bilddateien:

.hero {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.15), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(236,72,153,0.15), transparent 50%),
    linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  min-height: 100vh;
}

Hover-Effekte für Schaltflächen

Verläufe können beim Hover mit dem background-position-Trick animiert werden — dimensionieren Sie den Verlauf auf 200 % und verschieben Sie seine Position beim Hover:

.btn {
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
  background-size: 200% 200%;
  background-position: 0% 50%;
  transition: background-position 0.4s ease;
}
.btn:hover {
  background-position: 100% 50%;
}

Kartenränder mit border-image

Die Eigenschaft border-image akzeptiert einen Verlauf, was Verlaufsränder ohne Wrapper-Elemente oder Pseudoelement-Tricks ermöglicht (für einfarbige Hintergründe):

.card-gradient-border {
  border: 2px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #6366f1, #ec4899) border-box;
}

Fortschrittsbalken

Ein Verlaufs-Fortschrittsbalken kommuniziert Wert und visuelle Energie zugleich. Paaren Sie ihn mit einemwidth-Übergang für eine weiche Animation:

.progress-bar {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  width: 73%; /* Controlled by JS or CSS custom property */
  transition: width 0.6s ease;
}

Vergleich der Verlaufstypen

Tipps zur Auswahl guter Verlaufsfarben

Der häufigste Fehler bei der Auswahl von Verlaufsfarben ist das direkte Überspringen des Farbkreises — zum Beispiel der direkte Übergang von Rot zu Grün. Da der Mittelpunkt dieses Übergangs durch ein matschiges bräunliches Grau verläuft, sieht das Ergebnis unattraktiv aus, selbst wenn die Endpunktfarben einzeln ansprechend sind.

Die Lösung besteht darin, über einen stärker gesättigten Zwischenton zu führen. Versuchen Sie statt Rot direkt zu Grün lieber Rot → Orange → Gelbgrün für einen lebendigen Übergang. Alternativ bleiben Sie innerhalb eines benachbarten Farbtonbereichs — der Lila-zu-Rosa-Familie, der Indigo-zu-Cyan-Familie —, was stets saubere Ergebnisse liefert, weil der Mittelpunkt gesättigt bleibt.

Ein paar praktische Richtlinien:

• Halten Sie die Sättigung an beiden Enden hoch, wenn Sie einen lebendigen Verlauf wünschen. Eine gesättigte Farbe in eine ungesättigte zu überblenden, erzeugt eine unschöne tote Zone in der Mitte.
• Das Überblenden verschiedener Helligkeitswerte (hell zu dunkel) innerhalb derselben Farbtonfamilie sieht fast immer professionell aus und funktioniert gut in UI-Hintergründen.
• Fügen Sie bei 50 % einen Zwischenfarbstopp hinzu, um den Mittelpunkt-Farbton zu steuern — das ist die einzelne wirkungsvollste Korrektur für matschige Verläufe.
• Beschränken Sie Verläufe für die meiste UI-Arbeit auf zwei oder drei Stopps. Mehr als drei Stopps wirken meist chaotisch, es sei denn, Sie erstellen absichtlich einen Regenbogen oder eine Datenvisualisierung.

Barrierefreiheit: Text auf Verläufen

So nutzen Sie den BrowseryTools CSS-Verlaufsgenerator

Der CSS-Verlaufsgenerator gibt Ihnen eine Live-Vorschau, während Sie jeden Parameter konfigurieren. So nutzen Sie ihn wirksam:

• Verlaufstyp wählen: Wechseln Sie oben im Tool zwischen Linear, Radial und Konisch.
• Farbstopps hinzufügen: Klicken Sie auf die Verlaufsleiste, um neue Stopps hinzuzufügen. Ziehen Sie Stopps nach links und rechts, um ihre Positionen anzupassen. Klicken Sie auf einen Stopp, um die Farbauswahl zu öffnen und seine Farbe und Deckkraft zu ändern.
• Richtung oder Winkel anpassen: Bei linearen Verläufen ziehen Sie das Winkelrad oder geben einen präzisen Gradwert ein. Bei radialen Verläufen legen Sie Form und Position fest.
• Im Kontext vorschauen: Die Live-Vorschau aktualisiert sich sofort. Sie sehen genau, wie Ihr Verlauf aussehen wird, bevor Sie eine einzige Zeile kopieren.
• Das CSS kopieren: Klicken Sie auf die Schaltfläche „CSS kopieren", um produktionsreifes CSS für die background-Eigenschaft zu erhalten, bereit zum Einfügen in jedes Stylesheet oder Framework.

Alles läuft in Ihrem Browser. Es werden keine Verlaufsdefinitionen irgendwohin gesendet — es ist ein reines clientseitiges Tool. Sie können es offline verwenden, sobald die Seite geladen ist.

Browserunterstützung

CSS-Farbverläufe werden seit 2014 in allen großen Browsern unterstützt, was sie in praktisch jeder Produktionsumgebung ohne jegliche Polyfills oder Fallbacks sicher verwendbar macht. Konische Verläufe kamen später, sind nun aber in Chrome 69+, Firefox 83+, Safari 12.1+ und Edge 79+ vollständig unterstützt — und decken damit Stand 2026 weit über 97 % der weltweiten Browsernutzung ab. Das einzige Szenario, in dem Sie einen Fallback benötigen könnten, ist die Unterstützung sehr alter Android-WebView-Versionen in Unternehmens-Mobil-Apps.