CSS Tools CSS-Farbverlauf-Generator
Erstelle lineare, radiale und konische Farbverläufe visuell und kopiere sauberes CSS. Lege mehrere Ebenen übereinander, setze Farbstopps mit Transparenz und ziehe direkt in der Vorschau, um die Richtung zu ändern.
CSS-Farbverlauf von Grün zu Weiß
Jeder Verlauf kann mehrere Ebenen haben, und jede Ebene hat ihren eigenen Typ, Winkel und eigene Farben. Das Ergebnis ist reines CSS ohne Vendor-Präfixe, bereit zum Einfügen in dein Projekt. Der Link der Seite speichert deinen Verlauf, sodass du ihn teilen oder später wieder öffnen kannst.
So nutzt du den Farbverlauf-Generator
Verlaufstyp wählen
Wähle für jede Ebene linear, radial oder konisch. Linear mischt die Farben entlang einer Geraden, radial breitet sie von einem Mittelpunkt aus, konisch dreht sie um den Mittelpunkt.
Farben und Ebenen anpassen
Klicke auf die Farbleiste, um einen Farbstopp hinzuzufügen, ziehe ihn, um seine Position zu ändern, und wähle eine beliebige Farbe mit Transparenz. Mit der Schaltfläche zum Hinzufügen einer Ebene legst du einen weiteren Verlauf darüber.
Design in der Vorschau prüfen
Teste den Verlauf auf sechs Formen: Vollbild, Quadrat, horizontales und vertikales Rechteck, Kreis und Stern. Auch den Hintergrund hinter der Form kannst du ändern.
background: linear-gradient(90deg, #008000 0%, #ffffff 100%);