CSS-Verlauf-Generator
Erstelle lineare, radiale und konische CSS-Verläufe mit Live-Vorschau und Code-Export.
CSS-Verlauf-Generator: Erstelle lineare, radiale, konische & Mesh-Hintergründe
Verläufe sind eine unverzichtbare Grundlage modernen Webdesigns, von Glassmorphism-Oberflächen über hochkonvertierende Hero-Sektionen bis hin zu stilvollen interaktiven Buttons. Unser Zufälliger CSS-Verlauf-Generator erzeugt produktionsreifen W3C-CSS-Code für lineare, radiale, konische und Multi-Stop-Mesh-Verläufe mit weichen Farbübergängen und ganz ohne Banding.
Erzeuge sofort frische Farbverläufe per Tastendruck auf deine Spacebar, stelle Gradwinkel mit präzisen Slidern ein, passe Farbstopps individuell an, betrachte UI-Karten live und kopiere saubere CSS-Snippets oder Tailwind-Utility-Klassen direkt in deinen Code.
Lineare Verläufe
Weiche Farbvermischung entlang von Richtungsachsen von 0° bis 360°. Ideal für Hero-Hintergründe, Karten und CTA-Buttons.
Radiale Verläufe
Kreisförmige und elliptische Farbausbreitung von einem Brennpunkt aus. Perfekt für leuchtende Spotlights und atmosphärische Orbs.
Konische & Mesh-Verläufe
Rotierende 360°-Farbverläufe und mehrschichtige, weichgezeichnete Mesh-Verläufe für futuristische SaaS-Landingpages der nächsten Generation.
1-Klick-CSS-Export
Sofortiges Kopieren von CSS-background-Regeln, CSS-Variablen und Tailwind-Arbitrary-Utility-Klassen.
💡Vergleich der CSS-Verlaufstypen und ihrer besten Einsatzbereiche
| Verlaufstyp | CSS-Syntax | Browser-Unterstützung | Ideale UI-Platzierung |
|---|---|---|---|
| Linearer Verlauf | linear-gradient(135deg, #A, #B) | 99,8 % (Universell) | Navbar-Header, Pill-Buttons, Sektionstrenner |
| Radialer Verlauf | radial-gradient(circle, #A, #B) | 99,7 % (Universell) | Spotlight-Hero-Glows, Avatar-Ringe, Badge-Hintergründe |
| Konischer Verlauf | conic-gradient(from 90deg, #A, #B, #C) | 97,5 % (Modern) | Farbwähler, Kreisdiagramme, rotierende Border-Spinner |
| Mesh-Verlauf | Mehrere geschichtete radiale Verläufe | 99,5 % (Standard-CSS) | Atmosphärische SaaS-Hero-Hintergründe, Dark-Mode-Wallpaper |
❓Häufig gestellte Fragen
Werden die generierten CSS-Verläufe von allen Browsern unterstützt?▾
Ja. Moderne CSS-Eigenschaften wie linear-gradient() und radial-gradient() werden von mehr als 99,7 % aller Browser weltweit unterstützt – darunter Google Chrome, Apple Safari (iOS und macOS), Mozilla Firefox, Microsoft Edge und Opera – ganz ohne Herstellerpräfixe wie -webkit- oder -moz-.
Wie nutze ich diese Verläufe in Tailwind CSS v3 und v4?▾
In Tailwind CSS kannst du Arbitrary Values direkt im Class-Attribut deines HTML verwenden (z. B. className="bg-[linear-gradient(135deg,#7928ca,#ff0080)]") oder eigene Verlauf-Tokens in deiner Theme-Konfigurationsdatei definieren, um wiederverwendbare Klassen zu erstellen.
Was verursacht Banding bei Verläufen und wie verhindert dieses Tool es?▾
Farbbanding entsteht, wenn zwei Verlaufsfarben ähnliche Nuancen haben, sodass auf 8-Bit-Displays sichtbare Stufenlinien auftreten. Unser Generator wählt harmonische Stoppwerte mit ausreichender wahrgenommener Leuchtdichte-Spreizung über das OKLCH-/HSL-Spektrum, um ultraweiche, cremige Übergänge zu erzeugen.
Kann ich generierte Verläufe für CSS-Texteffekte verwenden?▾
Ja! Um einen Verlauf auf Überschriften anzuwenden, verwende den Standard-CSS-Schnipsel: background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent;. Damit entstehen beeindruckende Verlaufstexte in allen modernen Browsern.
Sind diese Verläufe kostenlos für kommerzielle Webprojekte und Kundenprojekte?▾
Ja. Der gesamte CSS-Code, alle Hex-Farbdefinitionen und Hintergrundkonfigurationen, die auf dieser Website generiert werden, sind zu 100 % kostenlos und ohne Namensnennung für öffentliche und kommerzielle Nutzung freigegeben.
Wie animiere ich einen CSS-Verlauf flüssig?▾
Da Browser Verlaufsfarben ohne die moderne @property-CSS-Regel nicht interpolieren können, ist die beste Praxis, background-size: 200% 200% zu setzen und die background-position-Keyframes von 0% 50% nach 100% 50% zu animieren.