CSS Gradient Generator

Erstellen Sie schöne lineare und radiale CSS-Verläufe mit zwei oder drei Farbstopps. Vorschau in Echtzeit und kopieren Sie das CSS sofort. Keine Anmeldung, vollständig clientseitig.

Gestalten Sie einen Verlauf in Sekunden. Wählen Sie zwei oder drei Farben, entscheiden Sie sich für linear oder radial, legen Sie den Winkel fest und kopieren Sie das einfügbereite CSS. Alles läuft in Ihrem Browser — es wird nichts hochgeladen.

Die Live-Vorschau aktualisiert sich, während Sie die Farben ändern.

Über CSS-Verläufe

Linear vs. radial

Ein linearer Verlauf fließt entlang einer geraden Linie in einem bestimmten Winkel. Ein radialer Verlauf geht von einem Mittelpunkt in einem Kreis aus.

Wo Verläufe glänzen

Sie verleihen Buttons, Hero-Bereichen, Karten und Hintergründen Tiefe, ohne zusätzliche Bilddateien — und halten Seiten schlank und schnell.

Gebaut mit chroma.js, einer Open-Source-Bibliothek unter der BSD-Lizenz.

FAQ

Kann ich mehr als drei Farben verwenden?
Dieses Werkzeug unterstützt bis zu drei Stopps. Für mehr können Sie das erzeugte CSS manuell mit weiteren Farbwerten erweitern.
Spielt der Winkel bei radialen Verläufen eine Rolle?
Nein — der Winkel gilt nur für lineare Verläufe. Radiale Verläufe breiten sich gleichmäßig vom Zentrum aus.
Werden mein Bild oder meine Farbdaten hochgeladen?
Nein. Die gesamte Verarbeitung erfolgt lokal in Ihrem Browser.