Hintergrundfarben fürs Frontend
Farbstopps und Winkel ziehen und Farben live ausprobieren; wenn es passt, direkt das background-CSS kopieren.
Wird geladen…
Guide
Der CSS-Verlaufsgenerator dient zum visuellen Bearbeiten linearer, radialer und konischer Verläufe und erzeugt parallel kopierbares CSS. Farbstopps lassen sich verschieben, per Klick auf freie Fläche hinzufügen und in der Farbe ändern; mindestens zwei Stopps bleiben erhalten. Bei linearen Verläufen stellst du die Richtung von 0–359° ein, bei radialen wählst du circle/ellipse und eine von neun Mittelpositionen, bei konischen Startwinkel und Mittelpunkt. Zusätzlich gibt es „Zufällige Inspiration“ auf Basis des Web-Crypto-Zufallsmoduls für ähnliche, komplementäre oder triadische Farbschemata.
Aktualisiert am 2026-09-102 min read
-webkit--Schreibweise, die erste Zeile dient als Vollfarben-Fallback.| Eingabe | Ausgabe | Hinweis |
|---|---|---|
| 135°, zwei Farbstopps | linear-gradient(...) |
Erzeugt gleichzeitig das CSS |
| Konischer Verlauf, Zentrum unten rechts | PNG-Wallpaper | Canvas zeichnet in der gewählten Preset-Größe |
Farbstopps und Winkel ziehen und Farben live ausprobieren; wenn es passt, direkt das background-CSS kopieren.
Denselben Verlauf als PNG im Desktop-4K- oder Hochkant-Handyformat exportieren.
Nein. Sie wählt zufällig einen Grundton und ein ähnliches, komplementäres oder triadisches Schema und variiert dann Sättigung, Helligkeit und linearen Winkel.
Die erste Zeile ist der Vollfarben-Fallback; lineare und radiale Verläufe enthalten zusätzlich die alte WebKit-Schreibweise, die letzte Zeile ist der moderne Standardverlauf.
Farben, CSS und PNG entstehen komplett lokal im Browser; es werden keine Online-Dienste für Farben oder Bilder abgefragt.
Aktualisiert am 2026-09-10
Lineare, radiale und konische Verläufe visuell bearbeiten, CSS kopieren oder PNG als Hintergrundbild exportieren
Dieses Werkzeug ist noch nicht vollständig übersetzt; einige Inhalte nutzen die Ausgangssprache oder die Rückfallsprache.
Farbstopp ziehen, um ihn zu verschieben; in eine leere Stelle klicken, um einen neuen anzulegen
background: #6366f1; /* Fallback für ältere Browser */ background: -webkit-linear-gradient(315deg, #6366f1 0%, #ec4899 100%); background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);