So nutzt du: CSS Verlauf Generator
- Wähle eine Vorlage oder starte mit dem Standardverlauf.
- Wähle Linear, Radial oder Konisch und stelle Winkel, Form oder Position ein.
- Bearbeite die Farbstopps: Klicke auf die Leiste, um einen hinzuzufügen, ziehe die Griffe, um sie zu verschieben, und tippe exakte Farben und Positionen in die Liste.
- Wähle optional eine OKLab/OKLCH-Interpolation für weichere Übergänge und klicke dann auf CSS kopieren.
Was ist ein CSS-Verlauf?
Ein CSS-Verlauf ist ein vom Browser erzeugtes Bild, das zwischen zwei oder mehr Farben übergeht. Da er ein <image> ist, verwendest du ihn in background, background-image, border-image oder mask-image, nicht in background-color. Verläufe benötigen keine HTTP-Anfrage, skalieren ohne Unschärfe auf jede Größe und lassen sich animieren oder überlagern.
Lineare, radiale und konische Verläufe
| Typ | Beispiel | Typische Verwendung |
|---|---|---|
| Linear | linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%) | Hero-Hintergründe, Buttons, Bild-Overlays |
| Radial | radial-gradient(circle at top, #fff 0%, #312e81 100%) | Spotlights, Glows, Vignetten |
| Konisch | conic-gradient(from 0deg at center, red, yellow, lime, aqua, blue, magenta, red) | Farbräder, Kreisdiagramme, Ladeanimationen |
Bei einem linearen Verlauf zeigt 0deg nach oben und 90deg nach rechts (entspricht to right). Konische Winkel beginnen oben und laufen im Uhrzeigersinn.
Farbstopps und harte Kanten
Jeder Stopp besteht aus einer Farbe und einer optionalen Position. Haben zwei Stopps dieselbe Position, wird der Übergang zu einer harten Kante. So entstehen Streifen oder die Vorlage Kreisdiagramm: #4f46e5 0% 40%, #22c55e 40% 75%. Um Inhalte sanft in die Seite übergehen zu lassen, endest du mit einer transparenten Version derselben Farbe (z. B. #00000000). Das vermeidet ein schmutziges graues Band.
Sanftere Verläufe mit OKLab und OKLCH
Standardmäßig interpolieren Browser in sRGB, daher wird Blau → Gelb durch ein trübes Grau geführt. CSS Color 4 erlaubt dir, den Farbraum zu wählen: linear-gradient(90deg in oklab, blue, yellow) bleibt leuchtend und gleichmäßig, und in oklch wandert über das Farbrad. Der Generator gibt zuerst eine einfache sRGB-Deklaration und danach die interpolierte Version aus. Browser, die die Syntax nicht kennen, ignorieren daher einfach die letzte Zeile.
Verläufe in Webflow verwenden
Das Style-Panel von Webflow hat unter Backgrounds eingebaute Editoren für lineare und radiale Verläufe. Übertrage Winkel und Stopp-Farben von diesem Tool dorthin. Für alles, was das Panel nicht anbietet, etwa konische Verläufe oder in oklch-Interpolation, füge das CSS in einen <style>-Block eines Embed-Elements oder in den Custom Code der Seite ein und sprich deine Klasse an. Brauchst du passende Schatten? Probier den Box Shadow Generator, oder prüfe Text auf deinem Verlauf mit dem Contrast Checker.
Auch gesucht als: css gradient generator, linear-gradient, radial-gradient, conic-gradient, css hintergrund verlauf, farbverlauf erstellen, oklch verlauf, webflow verlauf.
Passende Tools zu: CSS Verlauf Generator
- SVG Muster Generator — Gib Sektionen und Karten eine dezente Textur mit nahtlosen SVG-Mustern: Punkte, Raster, diagonale Linien, Zickzack, Wellen, Kreuze, Schachbretter, Kreise, Dreiecke und mehr.
- Farbkonverter — Füge eine beliebige CSS-Farbe ein — HEX, rgb(), hsl(), hwb(), oklch() oder einen Namen wie tomato — und erhalte sofort alle anderen Formate sowie eine fertige 50–950-Palette.
- SVG zu CSS Konverter — Füge ein SVG ein und erhalte eine kompakte, URL-kodierte Data URI sowie fertiges background-image- und einfärbbares mask-image-CSS.
- OG-Bildgenerator — Erstelle in Sekundenschnelle ein professionelles Vorschaubild für Links auf Facebook, LinkedIn, X, Slack und WhatsApp – wähle eine Vorlage aus, gib deinen Titel ein, füge ein Logo hinzu und lade dann die PNG-Datei sowie die passenden Meta-Tags herunter.
Häufige Fragen
Wie mache ich einen Verlauf transparent?
linear-gradient(180deg, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0)). Ein Übergang zur gleichen Farbe mit Alpha 0 vermeidet das graue Band, das bei älteren Browsern mit dem Schlüsselwort transparent entstehen kann.Warum wirkt mein Verlauf in der Mitte schmutzig oder grau?
Kann ich einen Verlauf auf Text anwenden?
background-clip: text; -webkit-background-clip: text; color: transparent;. Behalte eine einfarbige color als Fallback für die Lesbarkeit bei und prüfe den Kontrast zur Seite.Warum enthält das CSS zuerst eine einfarbige Hintergrundfarbe?
Wie animiere ich einen CSS-Verlauf?
background-position auf einem übergroßen Verlauf oder das Registrieren eigener Properties mit @property und das Animieren der Stopp-Farben oder des Winkels.