CSS-Verlaufsgenerator

Erstelle lineare, radiale oder konische CSS-Verläufe mit bis zu sechs Farbstopps und kopiere den Code.

Kostenlos Keine Registrierung Läuft in deinem Browser

Verlaufsart

Winkel 90°

Farbstopps

CSS

Der erste Stopp wird als einfarbige Ersatzfarbe hinzugefügt.

Brauchst du passende Farben? Nutze den Farbpaletten-Generator.

Häufige Anwendungen

Einen Hintergrund für einen Hero-Bereich oder Button erstellen
Farbkombinationen testen, bevor du sie in ein Design übernimmst
Verlaufscode erhalten, ohne ihn von Hand zu schreiben

So funktioniert es

So erstellst du einen CSS-Verlauf

Wähle die Verlaufsart

Wähle linear, radial oder konisch und lege den Winkel für lineare und konische Verläufe fest.

Lege die Farbstopps fest

Wähle bis zu sechs Farben und verschiebe jeweils den Positionsregler. Die Vorschau aktualisiert sich sofort.

Kopiere das CSS

Kopiere die background-Regel. Sie enthält eine einfarbige Ersatzfarbe für sehr alte Browser.

FAQ

Gut zu wissen

Wie verwende ich den CSS-Verlaufsgenerator?

1. Wähle die Verlaufsart: Wähle linear, radial oder konisch und lege den Winkel für lineare und konische Verläufe fest. 2. Lege die Farbstopps fest: Wähle bis zu sechs Farben und verschiebe jeweils den Positionsregler. Die Vorschau aktualisiert sich sofort. 3. Kopiere das CSS: Kopiere die background-Regel. Sie enthält eine einfarbige Ersatzfarbe für sehr alte Browser.

Welche Browser unterstützen diese Verläufe?

Lineare, radiale und konische Verläufe funktionieren in allen aktuellen Versionen von Chrome, Edge, Firefox und Safari.

Warum gibt es eine zweite background-Zeile?

Die erste Zeile ist eine Volltonfarbe, die Browser ohne Verlaufsunterstützung stattdessen verwenden.

Darf ich den Code kommerziell nutzen?

Ja. Du kannst das erzeugte CSS in jedem Projekt verwenden.

Weiterarbeiten

Mehr Design und Farbe

Alle anzeigen