Farbstopps
CSS-Ausgabe
Voreinstellungen
Klicken Sie auf ein Thema, um sofort einen vorkonfigurierten Verlauf zu laden.
Funktionsweise & CSS-Syntax
Dieses Tool erstellt visuell standardmäßige CSS-`background-image`-Eigenschaften mithilfe von Verlaufsfunktionen. Während Sie Farben hinzufügen und Positionen ändern, berechnet der Generator die genaue Syntax, die für moderne Browser erforderlich ist.
Lineare Verläufe
Ein linearer Verlauf lässt Farben entlang einer geraden Linie ineinander übergehen. Die Syntax lautet:
linear-gradient(winkel, farbe1 position1, farbe2 position2, ...)
Der Winkel bestimmt die Richtung (z. B. 90deg geht von links nach rechts). Die Position bestimmt, wo die Farbe ihre reinste Form erreicht (0 % bis 100 %).
Radiale Verläufe
Ein radialer Verlauf lässt Farben von einem zentralen Punkt nach außen hin übergehen. Die Syntax lautet:
radial-gradient(form at position, farbe1 pos1, farbe2 pos2, ...)
Die Form kann ein Kreis (circle) oder eine Ellipse (ellipse) sein. Dieses Tool setzt die Position standardmäßig auf die Mitte (center) des Elements.
Konische Verläufe
Ein konischer Verlauf lässt Farben rotierend um einen zentralen Punkt ineinander übergehen, ähnlich wie bei einem Tortendiagramm. Die Syntax lautet:
conic-gradient(from winkel at center, farbe1 pos1, farbe2 pos2, ...)
Konische Verläufe eignen sich hervorragend für die Erstellung von Farbrädern, Tortendiagrammen und komplexen winkligen Mustern.