Zum Inhalt springen

CSS-Gradient-Generator

Erstelle CSS-Farbverläufe visuell — linear, radial und konisch. Passe Farben, Winkel und Stopps an und kopiere den fertigen CSS-Code. Kostenlos, 100% in deinem Browser.

Typ
90°
Farbstopps
CSS-Ausgabe
 

Was sind CSS-Farbverläufe?

CSS-Farbverläufe (Gradients) ermöglichen fließende Farbübergänge ohne Bilder. Sie werden über die Eigenschaften linear-gradient(), radial-gradient() und conic-gradient() definiert und als Hintergrund angewendet.

Verlaufstypen

Linear — Farben verlaufen entlang einer geraden Linie in einem bestimmten Winkel. Radial — Farben strahlen von einem Mittelpunkt nach außen. Konisch — Farben werden um einen Mittelpunkt herum angeordnet, ideal für Tortendiagramme und Farbräder.

Farbstopps

Farbstopps definieren, wo und welche Farben im Verlauf erscheinen. Jeder Stopp besteht aus einer Farbe und einer optionalen Position in Prozent. Durch Hinzufügen, Entfernen und Verschieben von Stopps lassen sich komplexe Farbübergänge gestalten.

Datenschutz

Alle Verarbeitung läuft 100% in deinem Browser. Es werden keine Daten an Server gesendet.