CSS-Verlauf-Generator — Lineare & Radiale Verläufe Erstellen

CSS-Verlauf-Generator — Verläufe Visuell Gestalten

Erstellen Sie atemberaubende CSS-Verläufe mit einem visuellen Live-Editor. Fügen Sie beliebig viele Farbstopps hinzu, wählen Sie lineare, radiale oder konische Verläufe, passen Sie den Winkel an und kopieren Sie den einsatzbereiten CSS-Code. Perfekt für Hintergründe, Buttons, Karten und Hero-Bereiche.

Verlaufstypen

• Linear: Farben verlaufen entlang einer geraden Linie in beliebigem Winkel (0–360°)
• Radial: Farben strahlen vom Zentrum aus, als Kreis oder Ellipse
• Konisch: Farben drehen sich um einen Mittelpunkt (ideal für Farbräder und Tortendiagramm-Effekte)

Funktionen

• Unbegrenzte Farbstopps: Farben frei hinzufügen oder entfernen
• Positionskontrolle: jede Farbe von 0% bis 100% verschieben
• Winkelkontrolle: lineare und konische Verläufe präzise drehen
• Live-Vorschau: sehen Sie Ihren Verlauf sofort aktualisiert
• Zufallsknopf: generieren Sie eine frische Farbkombination zur Inspiration
• Sauberer CSS-Output: kopieren Sie eine einzelne einfügefertige Zeile

So verwenden Sie das CSS

Kopieren Sie den generierten Code und wenden Sie ihn auf ein beliebiges Element an. Zum Beispiel:

.hero {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}

Tipps

• Zwei oder drei Farben wirken meist sauberer als viele
• Für dezente Hintergründe verwenden Sie nahe beieinanderliegende Farben im Farbkreis
• Für lebendige Effekte verwenden Sie Komplementärfarben
• Konische Verläufe sind perfekt für Lade-Spinner und Farbwähler

Datenschutz

Dieses Tool läuft vollständig in Ihrem Browser. Nichts wird hochgeladen oder gespeichert.