HEXgenerator.online

CSS-Verlauf-Generator

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

So funktioniert es

  1. Markiere die Palettenfarben, die als Farbstopps dienen sollen.
  2. Wähle linear, radial oder konisch und stelle den Winkel mit dem Regler ein.
  3. Kopiere das CSS. Es enthält eine Ersatzfarbe und eine Klasse für Verlaufstext.

Häufige Fragen

Was unterscheidet lineare, radiale und konische Verläufe?

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.

Funktionieren CSS-Verläufe in allen Browsern?

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.

Wie lege ich einen Verlauf auf Text?

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.