CSS-Verlaufsgenerator
Gestalten Sie einen linearen, radialen oder konischen Verlauf, kopieren Sie den CSS-Code und laden Sie ihn als PNG herunter.
Verlaufsfarben
Alles läuft in Ihrem Browser: Es werden keine Daten gesendet.
Über dieses Tool
Mit diesem CSS-Verlaufsgenerator gestalten Sie visuell einen linearen, radialen oder konischen Farbverlauf und erhalten sofort den passenden CSS-Code. Wählen Sie 2 bis 6 Farben, setzen Sie jede an die gewünschte Position und stellen Sie den Winkel ein: Die Vorschau aktualisiert sich live. Praktisch für Website-Hintergründe, Schaltflächen, Banner oder Social-Media-Grafiken.
Der erzeugte Code enthält zuerst eine Zeile mit einer einfarbigen Ersatzfarbe und danach den Verlauf. Die Schaltflächen „Umkehren“ und „Zufällig“ helfen, schnell Ideen auszuprobieren. Sie können den Verlauf auch als PNG-Bild in 1920 × 1080, 1080 × 1080, 1080 × 1920 oder 3840 × 2160 px herunterladen und Ihre Kreation über einen Link teilen, der die Farben enthält.
- Lineare, radiale oder konische Verläufe
- 2 bis 6 Farben mit einstellbarer Position
- Winkel von 0 bis 360° in 5°-Schritten
- CSS-Code mit einfarbiger Ersatzfarbe
- PNG-Export bis 3840 × 2160 px
So funktioniert es
- Wählen Sie den „Verlaufstyp“ und stellen Sie den „Winkel“ ein.
- Legen Sie die „Verlaufsfarben“ und ihre Position fest; fügen Sie bei Bedarf Farben hinzu.
- Klicken Sie auf „Kopieren“, um den CSS-Code zu übernehmen.
- Oder wählen Sie eine Größe und klicken Sie auf „Als PNG herunterladen“.
Häufige Fragen
Werden meine Farben irgendwohin gesendet?
Nein. Der Verlauf wird in Ihrem Browser berechnet und gezeichnet, es werden keine Daten gesendet. Die Farben stehen nur in der Seitenadresse für den Link zum Teilen.
Ist der Verlaufsgenerator kostenlos?
Ja, er ist kostenlos und ohne Konto oder Registrierung nutzbar.
Wie verwende ich den CSS-Code des Verlaufs?
Kopieren Sie beide background-Zeilen in die CSS-Regel Ihres Elements. Die erste Zeile setzt eine einfarbige Farbe, falls der Browser den Verlauf nicht unterstützt, die zweite setzt den Verlauf.
Enthält das PNG-Bild eine Markierung?
Ja, das heruntergeladene PNG trägt unten rechts einen kleinen, dezenten Hinweis „kspnai.com/tools/gradient-maker“ mit dem KSPNAI-Logo. Der kopierte CSS-Code enthält keine Markierung.