Webentwicklung
CSS Gradient Generator
Einen linearen, radialen oder konischen Verlauf aus mehreren Farben zusammenstellen und das fertige CSS erhalten.
0° — oben, dann im Uhrzeigersinn.
Ein CSS-Verlauf ist ein sanfter Übergang zwischen mehreren Farben, den der Browser selbst ohne Bild erzeugt. Dieses Tool lässt dich visuell einen linearen, radialen oder konischen Verlauf bauen und den fertigen CSS-Code sofort kopieren.
So verwendest du es
- Füge Farbstopps hinzu und ziehe sie, um genau festzulegen, wo jeder Übergang stattfindet.
- Wähle einen Verlaufstyp — linear (eine Richtung in Grad), radial (Form und Position des Zentrums) oder konisch (Rotation um einen Punkt).
- Kopiere den fertigen CSS-Code mit einem Klick und füge ihn in background oder background-image ein.
Typische Anwendungsfälle
- Einen Hintergrund für eine Hero-Sektion oder einen Button wählen, ohne einen Grafikeditor zu öffnen.
- Einen Verlauf aus einem Design-Mockup (Figma usw.) in exakter CSS-Syntax nachbauen.
- Schnell mit Farbübergängen experimentieren, bevor eine Entscheidung in einem Designsystem festgelegt wird.
Was du wissen solltest
Ein radialer Verlauf streckt sich standardmäßig in die Form seines Elements (eine Ellipse), bleibt also nicht immer ein Kreis — das ist bei rechteckigen Blöcken zu beachten.
Mehrere Verläufe lassen sich übereinanderlegen, indem sie durch Kommas getrennt in background-image aufgelistet werden — das funktioniert wie gestapelte Ebenen, wobei der erste in der Liste oben liegt.
Artikel zu diesem Tool: CSS-Verläufe: wie sich linear von radial und conic unterscheidet
Häufig gestellte Fragen
Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?
Lineare Verläufe gehen entlang einer geraden Linie in einem gewählten Winkel über, radiale Verläufe breiten sich von einem Mittelpunkt aus als Kreis oder Ellipse aus, und konische Verläufe fahren Farben um einen Mittelpunkt herum wie ein Farbrad.
Werden konische Verläufe in allen Browsern unterstützt?
Alle aktuellen gängigen Browser unterstützen konische Verläufe, aber es ist eine neuere CSS-Funktion als lineare oder radiale Verläufe, sodass sehr alte Browserversionen sie möglicherweise nicht darstellen.
Was erhalte ich als Ausgabe?
Das Tool generiert einsatzbereite CSS-background-Syntax mit Ihren gewählten Farben, Stopps und Positionen, die Sie direkt in Ihr Stylesheet einfügen können.
Was unterscheidet repeating-linear-gradient von einem gewöhnlichen linear-gradient?
Ein gewöhnlicher linear-gradient streckt seine Farbabfolge genau einmal über das gesamte Element, während repeating-linear-gradient dieselbe Abfolge von Color Stops zyklisch wiederholt und so einen gestreiften oder gemusterten Hintergrund erzeugt.
Kann ich mehrere Verläufe als Hintergrund übereinanderlegen?
Ja, die Eigenschaft background-image akzeptiert eine durch Kommas getrennte Liste von Verläufen, und sie werden übereinandergelegt wie mehrere Hintergrundbilder — der erste in der Liste erscheint ganz oben.