CSS-Farbverlauf-Generator

So nutzen Sie den CSS-Farbverlauf-Generator

1. Wählen Sie die Art des Verlaufs: Linear, Radial oder Konisch. Die große Vorschau oben aktualisiert sich bei jeder Änderung.
2. Bei einem linearen Verlauf stellen Sie den Winkel mit dem Schieberegler ein oder tippen ihn in Grad ein (90° verläuft von links nach rechts, 180° von oben nach unten). Bei einem konischen Verlauf legt der Winkel fest, wo die Drehung beginnt.
3. Bei radialen und konischen Verläufen verschieben Sie den Mittelpunkt mit Mittelpunkt X und Mittelpunkt Y. Ein radialer Verlauf kann ein Kreis oder eine Ellipse sein (Menü Form).
4. Bearbeiten Sie die Farbstopps. Klicken Sie an eine beliebige Stelle der Leiste, um dort einen Stopp mit der Farbe hinzuzufügen, die der Verlauf an diesem Punkt bereits hat, oder füllen Sie mit Stopp hinzufügen die größte Lücke. Ziehen Sie einen Regler, um ihn zu verschieben. Jeder Stopp hat außerdem eine Zeile, in der Sie seine Farbe auswählen, eine beliebige CSS-Farbe eintippen, die Position (%) festlegen oder ihn Entfernen können (ein Verlauf behält immer mindestens zwei Stopps).
5. Aktivieren Sie bei Bedarf Wiederholend, wählen Sie die Farbinterpolation, klicken Sie auf Umkehren, um die Stopps zu spiegeln, oder auf Zufälliger Verlauf, wenn Sie Inspiration suchen.
6. Kopieren Sie das Ergebnis unter CSS-Code mit Kopieren.

Tastatur: Fokussieren Sie einen Regler auf der Leiste und verschieben Sie ihn mit den Pfeiltasten um 1 % (mit Umschalt um 10 %). Pos1 und Ende springen an die Enden, Entf entfernt den Stopp.

Die drei Verlaufsfunktionen

• linear-gradient() mischt Farben entlang einer geraden Linie. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) verläuft von Indigo links nach Pink rechts. Winkel werden im Uhrzeigersinn ab oben gemessen: 0deg zeigt nach oben, 90deg nach rechts.
• radial-gradient() strahlt von einem Mittelpunkt aus. radial-gradient(circle at 30% 40%, …) setzt den Mittelpunkt 30 % vom linken und 40 % vom oberen Rand. Eine Ellipse dehnt sich mit dem Element, ein Kreis bleibt rund.
• conic-gradient() dreht sich wie Uhrzeiger um einen Mittelpunkt. conic-gradient(from 0deg at 50% 50%, …) eignet sich für Farbkreise, Tortendiagramme und Ladeanimationen. Die Positionen der Stopps sind Anteile der vollen Umdrehung.

Die Option Wiederholend nutzt repeating-linear-gradient() und die verwandten Funktionen: Das Muster Ihrer Stopps wiederholt sich, bis das Element gefüllt ist. Setzen Sie den letzten Stopp deutlich unter 100 % (z. B. auf 20 %), um Streifen oder Ringe zu sehen.

Zwei Stopps an derselben Position erzeugen eine harte Kante statt eines Übergangs – so entstehen Streifen und Flaggen. Der Generator sortiert die Stopps im Code nach Position, wie es CSS verlangt.

Interpolation in sRGB oder OKLCH

Standardmäßig mischen Browser die Farben eines Verlaufs in sRGB. Zwischen zwei gesättigten Farben wie Blau und Gelb entsteht dabei oft eine stumpfe, graue oder schlammige Mitte. Mit CSS Color Level 4 können Sie den Interpolationsraum wählen: linear-gradient(90deg in oklch, …) mischt im wahrnehmungsbasierten OKLCH-Raum und hält die Mitte leuchtend.

Mit OKLCH (weicher, mit sRGB-Fallback) schreibt das Tool zwei background-Deklarationen: zuerst die klassische sRGB-Version, dann die OKLCH-Version. Browser, die Interpolationsräume unterstützen (Chrome und Edge ab 111, Safari ab 16.2, Firefox ab 127), verwenden die zweite Zeile, ältere ignorieren sie und behalten die erste.

Tipps

• In den Feldern der Stopps sind auch Farben mit Transparenz erlaubt, z. B. #00000080 oder rgb(0 0 0 / 50%) – praktisch für Überlagerungen auf Bildern.
• Der Code verwendet background. Nutzen Sie stattdessen background-image, wenn Sie weitere Hintergrundeigenschaften separat setzen.
• Dezente Verläufe (zwei nahe Töne einer Farbe) wirken meist professioneller als Regenbogenverläufe.