CSS-Farbverlauf-Generator

Einen Farbverlauf von Hand zu schreiben heißt: CSS ändern, speichern, neu laden – bis der Winkel stimmt. Dieser Generator zeigt eine Live-Vorschau: Typ, Winkel und Farbstopps einstellen, Ergebnis ansehen und produktionsfertiges CSS kopieren, ganz ohne Präfixe für heutige Browser.

CSS-Farbverlauf: so funktioniert er

1. Wählen Sie einen linearen oder radialen Verlauf.
2. Stellen Sie bei einem linearen Verlauf den Winkel ein.
3. Fügen Sie Farbstopps hinzu und verschieben Sie ihre Position.
4. Kopieren Sie das erzeugte CSS direkt in Ihr Stylesheet.

Häufige Fragen

Wie funktionieren Winkel bei CSS-Farbverläufen?

0deg zeigt nach oben, und die Winkel wachsen im Uhrzeigersinn: 90deg verläuft von links nach rechts, 180deg von oben nach unten. Das weicht von der mathematischen Konvention ab und sorgt regelmäßig für Verwirrung.

Warum wirkt mein Verlauf in der Mitte trüb?

Weil die Interpolation in sRGB durch einen entsättigten Mittelpunkt läuft, besonders zwischen Komplementärfarben. Ein zusätzlicher Farbstopp in der Mitte oder die oklch-Interpolation moderner Browser behebt das.

Braucht man noch Browser-Präfixe?

Nein. linear-gradient und radial-gradient funktionieren seit Jahren in allen aktuellen Browsern ohne Präfix. Präfixe machen die Datei nur größer.

Lässt sich ein Farbverlauf animieren?

Nicht direkt über eine Transition, weil background-image nicht interpoliert wird. Üblich ist, background-position auf einem übergroßen Verlauf zu animieren oder mit @property registrierte Custom Properties zu nutzen.

JSON-Formatierer · Base64-Konverter · URL-Kodierer · JWT-Decoder · Alle Tools ansehen

Auch verfügbar auf: English · Español · Português · Français