Farbverlauf-Generator
Erstelle mehrschichtige lineare, radiale und konische Farbverläufe
Farbverlauf-Generator
Erstelle mehrschichtige lineare, radiale und konische Farbverläufe
Tipp: Verschiebe die Ziehpunkte in der Vorschau, um die Verlaufsrichtung zu ändern. Ziehe die Farbstopps auf der Leiste, um sie neu zu positionieren, und die Ebenen-Tabs, um ihre Reihenfolge zu ändern.
CSS-Ausgabe
background-image + background-color
So funktioniert der Farbverlauf-Generator
Erstelle mehrschichtige lineare, radiale und konische CSS-Farbverläufe. Passe die Farbstopps visuell an und kopiere produktionsreifes CSS.
Mehrschichtige Farbverläufe
Staple mehrere Verlaufsebenen und mische sie visuell. Jede Ebene hat ihren eigenen Typ, eigene Farben und einen eigenen Winkel. Kombiniere lineare, radiale und konische Verläufe in einem Element.
Präzise Farbstopps
Füge Farbstopps auf einer visuellen Leiste hinzu, verschiebe oder lösche sie. Passe Position und Deckkraft jedes Stopps an. Das CSS aktualisiert sich in Echtzeit, während du ziehst.
Linear, radial & konisch
Wähle pro Ebene einen von drei Verlaufstypen. Lege den Winkel für lineare, Form und Position für radiale und den Startwinkel für konische Verläufe fest. Kombiniere verschiedene Typen über mehrere Ebenen.
CSS kopieren
Kopiere das komplette Hintergrund-CSS mit allen Ebenen per Klick. Die Ausgabe nutzt die Standard-Syntax für CSS-Farbverläufe, die alle modernen Browser unterstützen.
Häufig gestellte Fragen
Lineare Verläufe gehen entlang einer geraden Linie in einem bestimmten Winkel von Farbe zu Farbe über. Radiale Verläufe breiten sich von einem Mittelpunkt kreis- oder ellipsenförmig nach außen aus. Konische Verläufe drehen die Farben um einen Mittelpunkt – wie bei einem Tortendiagramm. Jeder Typ erzeugt einen eigenen visuellen Effekt.
Ja. In CSS lassen sich mehrere Verläufe in einer einzigen background-Eigenschaft stapeln, getrennt durch Kommas. Mit diesem Tool fügst du ganz einfach Ebenen hinzu, änderst ihre Reihenfolge und siehst das kombinierte Ergebnis in der Vorschau.
Ein Farbstopp legt eine Farbe an einer bestimmten Position auf der Verlaufslinie fest (0 % bis 100 %). Der Browser interpoliert weich zwischen benachbarten Stopps. Je mehr Stopps du setzt, desto feiner steuerst du die Farbübergänge.
Ja. Lineare, radiale und konische CSS-Verläufe werden von allen modernen Browsern unterstützt, darunter Chrome, Firefox, Safari und Edge. Konische Verläufe wurden als letzte vollständig unterstützt und funktionieren seit 2020 überall.