CSS-Gradient-Generator 2026

So funktioniert der CSS-Gradient-Generator

Der Generator erzeugt einen gültigen CSS-Wert für die background-Eigenschaft. Bei einem linearen Verlauf benötigt der Browser drei Informationen: einen Winkel und mindestens zwei Color-Stops. Der Winkel wird in Grad angegeben – 0° verläuft von unten nach oben, 90° von links nach rechts. Color-Stops bestehen aus einer Farbe (HEX, RGB oder HSL) und optional einer Position in Prozent.

Radiale Gradients verlaufen kreisförmig vom Zentrum nach außen. Sie eignen sich für weiche Highlights, Spotlights oder dekorative Elemente. Beide Typen werden vom Browser zur Laufzeit gerendert – es entsteht keine Bilddatei, was Bandbreite spart und perfekte Schärfe auf jedem Display garantiert.

Standard und Spezifikation

CSS-Gradients sind im CSS Images Module Level 3 und 4 definiert (W3C). Die Syntax wird von allen modernen Browsern unterstützt – Chrome, Firefox, Safari und Edge ab Version 79. Vendor-Prefixes wie -webkit- sind seit über fünf Jahren nicht mehr nötig.

Color Module 4 erweitert die Möglichkeiten um Interpolation in alternativen Farbräumen wie OKLCH, LAB oder display-p3 – das vermeidet die typischen grauen Übergangszonen, die bei sRGB-Interpolation zwischen kontrastierenden Farben entstehen.

Anwendungsfälle

Hero-Sections: Großflächige Verläufe als Hintergrund für Landingpages.
Buttons: Dezente vertikale Verläufe geben Tiefe und Klickbarkeit.
Skeleton-Loader: Animierte Verläufe simulieren Inhalt während Ladezeit.
Karten und Cards: Mehrfarbige Verläufe als Markierung für Premium-Inhalte.
SVG-Overlays: Halbtransparente Gradients über Bildern für Lesbarkeit von Text.

Datenschutz: Client-Side

Der Generator läuft vollständig im Browser. Es gibt keinen Upload, keine API-Calls, keine Cookies – nur JavaScript, das HEX-Werte und Winkel zu einem CSS-String zusammensetzt. Die Zwischenablage wird über die native Clipboard-API angesprochen.

Damit ist die DSGVO-konforme Nutzung gewährleistet, ohne dass Cookie-Banner oder Einwilligungen nötig wären – es findet keine Verarbeitung personenbezogener Daten statt.

Typische Fehler

Vergessenes background: Gradients sind background-image-Werte. Im Shorthand background: linear-gradient(...) akzeptiert.
Falscher Winkel: 0deg ist von unten nach oben, viele erwarten von oben nach unten – das wäre 180deg.
Banding: Bei sehr ähnlichen Farben über große Flächen entstehen sichtbare Stufen. Kontrast erhöhen oder Noise-Overlay nutzen.
Stops außerhalb 0–100 %: Funktionieren technisch, sind aber selten gewollt und verwirren später.
Performance bei Animationen: Gradients neu zu zeichnen ist teurer als transform oder opacity. Bei Animation lieber background-position verschieben.

Häufige Fragen

Ein CSS-Gradient ist ein fließender Übergang zwischen zwei oder mehr Farben, der direkt im Browser gerendert wird – ohne Bilddatei. CSS unterstützt lineare (linear-gradient), radiale (radial-gradient) und konische (conic-gradient) Verläufe. Gradients sind als background-image-Werte definiert und beliebig skalierbar, ohne an Schärfe zu verlieren. Sie sparen Bandbreite und sind hochauflösend.

Der erste Parameter ist der Winkel: 0deg bedeutet von unten nach oben, 90deg von links nach rechts, 180deg von oben nach unten. Danach folgen Color-Stops mit optionalen Positionen, etwa 'red 0%, blue 100%'. Der Browser interpoliert die Farben dazwischen linear im RGB-Raum (CSS Color 4 erlaubt auch andere Räume via 'in oklch').

linear-gradient verläuft entlang einer geraden Achse, radial-gradient von einem Mittelpunkt nach außen – wie eine Sonne. radial unterstützt circle und ellipse als Form sowie eine Position des Zentrums. Typisch für Hintergrund-Highlights, Spotlights oder weiche Vignetten. linear ist häufiger für Buttons, Hero-Sections und Trennlinien.

Zwei Stops liefern den klassischen Übergang. Drei Stops erlauben ein Highlight in der Mitte. Mehr als 4–5 Stops wirken oft unruhig und verschwommen. Bei sehr vielen Stops kann der Gradient Banding zeigen – Abhilfe schafft eine dezente Noise-Textur als Overlay (background-blend-mode).

Banding sind sichtbare Stufen im Verlauf, statt eines weichen Übergangs. Ursachen: zu wenig Farbtiefe (8-Bit), zu ähnliche Farben, zu großer Verlauf. Hilfe: kontrastreichere Farben wählen, eine subtile SVG-Noise als Overlay einbinden, oder OKLCH/LAB-Interpolation nutzen (CSS Color Module 4: linear-gradient(in oklch, ...)).

Direktes Animieren der Color-Stops wird von Browsern nicht unterstützt. Stattdessen animieren Sie background-position bei einem überdimensionierten Hintergrund, oder nutzen CSS-Variablen mit @property-Definition (CSS Houdini). Eine zuverlässige Methode ist der Wechsel zwischen zwei Hintergründen via opacity-Transition.

conic-gradient erzeugt einen Verlauf, der um einen Mittelpunkt rotiert – wie eine Tortenscheibe. Ideal für Donut-Charts, Farbpicker oder dekorative Elemente. Syntax: conic-gradient(from 0deg, red, blue, green, red). Wird von allen modernen Browsern unterstützt.

linear- und radial-gradient sind seit über zehn Jahren in allen Browsern fest verankert (Chrome, Firefox, Safari, Edge). conic-gradient wird seit 2020 universell unterstützt. Vendor-Prefixes (-webkit-, -moz-) sind heute überflüssig. Für IE11-Support müssten Sie auf SVG zurückgreifen.

CSS-Gradients werden bei jedem Repaint neu berechnet, sind aber bei normalen Größen sehr schnell. Probleme entstehen erst bei komplexen Gradients über große Flächen, in vielen DOM-Knoten oder mit Animationen. Tipp: will-change: background sparsam einsetzen oder den Gradient als statisches PNG/WebP cachen.