Ein CSS-Verlauf ist ein weicher Übergang zwischen zwei oder mehr Farben, erzeugt mit linear-gradient(), radial-gradient() oder conic-gradient(). Hier baust du ihn aus deinen Palettenfarben, wählst Typ und Winkel und kopierst den Code.
Aktualisiert am
HEX anklicken zum Kopieren · Schloss zum Fixieren
Jede Zelle zeigt die Spaltenfarbe als Text auf der Zeilenfarbe als Hintergrund.
Abstufung anklicken, um den HEX-Wert zu kopieren.
Nur in diesem Browser gespeichert. Palette anklicken, um sie zu laden.
Ein linearer Verlauf läuft gerade in einem Winkel. Ein radialer breitet sich von einem Mittelpunkt als Kreis oder Ellipse aus. Ein konischer dreht sich um einen Punkt, wie die Stücke eines Tortendiagramms.
linear-gradient() und radial-gradient() funktionieren in allen aktuellen Browsern. conic-gradient() unterstützen moderne Versionen von Chrome, Edge, Firefox und Safari. Die Ersatzfarbe deckt ältere Browser ab.
Setze den Verlauf als background, ergänze background-clip: text (und -webkit-background-clip: text) und stelle die Textfarbe auf transparent. Der exportierte Code enthält diese Klasse bereits.
