CSS-Verlaufsgenerator — lineare, radiale und konische Verläufe mit Live-Vorschau

Was das Tool macht

Mit dem CSS-Verlaufsgenerator gestalten Sie einen Verlauf nach Augenmaß und kopieren das fertige CSS. Wählen Sie einen linearen, radialen oder konischen Verlauf, fügen Sie beliebig viele Farbstopps hinzu, verschieben Sie deren Positionen, stellen Sie Winkel oder Mittelpunkt ein – die Vorschau aktualisiert sich sofort. Sie können auch einen vorhandenen linear-gradient(…), radial-gradient(…) oder conic-gradient(…) einfügen und visuell bearbeiten. Alles läuft in Ihrem Browser.

So funktioniert es

Starten Sie mit einer Vorlage oder behalten Sie den Beispielverlauf.
Wählen Sie den Typ. Lineare und konische Verläufe haben einen Winkel; radiale und konische Verläufe haben einen Mittelpunkt, den Sie mit Mitte X und Mitte Y verschieben.
Bearbeiten Sie die Farbstopps: Farbe per Farbwähler ändern oder eine beliebige CSS-Farbe eintippen, Position ziehen, mit + Stopp hinzufügen einen Stopp in die größte Lücke setzen und mit Umkehren die Reihenfolge drehen.
Aktivieren Sie Wiederholen, um den Verlauf für Streifen und Ringe zu kacheln.
Kopieren Sie den Code aus der Karte CSS, auf Wunsch mit einer Volltonfarbe als Fallback für sehr alte Browser.

Das Feld Verlauf-CSS unten zeigt den Verlaufswert und ist editierbar: Fügen Sie einen Verlauf aus Ihrem Stylesheet oder einem Designtool ein, und die Regler übernehmen ihn.

Beispiel

.hero {
  background-color: #667eea;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Tipps für gute Verläufe

Lieber dezent. Zwei benachbarte Farbtöne (Blau zu Violett, Orange zu Rosa) wirken weicher als Komplementärfarben, die in der Mitte schmutzig grau werden können.
Ein mittlerer Stopp steuert die Mischung. Ein dritter Stopp, etwas heller als seine Nachbarn, ergibt ein weiches Glanzlicht.
Harte Stopps formen Figuren. Stopps an derselben Position erzeugen scharfe Kanten: Streifen, Flaggen, Fortschrittsbalken und Tortendiagramme nutzen diesen Trick.
Richtungen. to right entspricht 90deg und to bottom (Standard) 180deg. Winkel laufen von oben im Uhrzeigersinn.
Text auf Verläufen muss über den ganzen Verlauf lesbar bleiben. Prüfen Sie den hellsten und den dunkelsten Stopp mit einem Kontrastprüfer gegen die Textfarbe.

FAQ

› Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?

Ein linearer Verlauf mischt Farben entlang einer geraden Linie in einem Winkel. Ein radialer Verlauf breitet sich von einem Mittelpunkt als Kreis oder Ellipse aus. Ein konischer Verlauf dreht sich wie Uhrzeiger um einen Mittelpunkt und eignet sich für Farbkreise und Tortendiagramme.

› Wie bekomme ich harte Streifen statt eines weichen Übergangs?

Geben Sie zwei benachbarten Stopps dieselbe Position, etwa red 50% und blue 50%. Die Farbe wechselt dann an dieser Stelle schlagartig. Mit Wiederholen kachelt sich das Muster – so entstehen Streifen in CSS.

› Kann ich transparente Farben verwenden?

Ja. Geben Sie in einen Stopp eine beliebige CSS-Farbe ein, auch rgba(), hsl() mit Alpha, 8-stelliges Hex oder transparent. Der Farbwähler behält den Alphawert bei, und die Vorschau zeigt hinter transparenten Bereichen ein Schachbrettmuster.

› Brauche ich noch Vendor-Präfixe oder einen Fallback?

Präfixe sind nicht nötig: Alle aktuellen Browser unterstützen lineare, radiale und konische Verläufe ohne Präfix. Die optionale Volltonfarbe als Fallback ist nur für sehr alte Browser oder Programme wichtig, die background-color lesen, etwa manche E-Mail-Clients.