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.

Schritt für Schritt

1. Wählen Sie den Typ: linear, radial oder konisch.
2. Stellen Sie bei linearen Verläufen den Winkel ein, bei radialen die Form (Kreis oder Ellipse).
3. Fügen Sie Farbstopps hinzu und verschieben Sie sie. Mit Zufällig erhalten Sie neue Ideen.
4. Kopieren Sie den Code mit CSS kopieren.

Häufige Fragen

Wie verwende ich den Code?
Fügen Sie ihn als background oder background-image in eine CSS-Regel ein, zum Beispiel für einen Hintergrund oder einen Button.

Was ist ein konischer Verlauf?
Die Farben laufen im Kreis um einen Mittelpunkt, ähnlich wie bei einem Tortendiagramm oder einem Farbrad.

Wie viele Farbstopps darf ich verwenden?
Beliebig viele. Mehr Stopps geben mehr Kontrolle, machen das Ergebnis aber schwerer lesbar.