CSS erlaubt Winkel nicht nur in Grad (deg), sondern auch in grad — einer Einheit, die im deutschsprachigen Vermessungswesen bis heute eine reale Geschichte hat, auch wenn sie in Stylesheets kaum jemand benutzt.
Drei Arten, Farbe zu verteilen
linear-gradient(45deg, red, blue) streckt Farbe entlang einer geraden Linie in einem festgelegten Winkel — der Standardfall für Hintergründe auf Buttons, Bannern und Karten. radial-gradient(circle, yellow, orange) verteilt Farbe in konzentrischen Kreisen oder Ellipsen von einem Punkt nach außen, ideal für einen Lichtfleck-Effekt. conic-gradient(red, yellow, green, blue, red) dreht Farbe um einen Mittelpunkt wie ein Uhrzeiger und ist der einzige der drei Typen, mit dem sich ein Kreisdiagramm oder ein ringförmiger Fortschrittsbalken ganz ohne zusätzliche Grafik bauen lässt.
Warum es „grad" als Winkeleinheit überhaupt gibt
Der Neugrad (auch Gon), bei dem ein Vollkreis in 400 statt 360 Teile geteilt wird, entstand während der Dezimalisierungsbewegung der Französischen Revolution und wurde in Kontinentaleuropa — besonders in der deutschen und österreichischen Landvermessung — jahrzehntelang eingesetzt, weil er sich glatt mit dem metrischen System verträgt. CSS übernimmt diese Einheit direkt: conic-gradient(from 100grad, red, blue) ist genauso gültig wie eine Angabe in deg, rad oder turn — ein kleines Relikt der Vermessungsgeschichte mitten in modernem Webcode.
Color Stops und Wiederholung
Jede Farbe lässt sich an eine Prozentposition binden, etwa linear-gradient(red 0%, yellow 50%, blue 100%), um die Schärfe des Übergangs zu steuern. Die Funktionen repeating-linear-gradient() und repeating-radial-gradient() wiederholen dieselbe Stop-Abfolge automatisch und erzeugen so gestreifte oder schachbrettartige Muster mit einer einzigen CSS-Zeile.
Wofür das gebraucht wird
- Fertigen CSS-Verlaufscode auswählen und kopieren, ohne Winkel und Farben manuell einzustellen.
- Verstehen, welche Verlaufsart für einen bestimmten visuellen Effekt geeignet ist.
- Die Positionen der Color Stops für den gewünschten Übergang präzise einstellen.