CSS Conic Gradient • Konischer Verlauf

Konischer Verlauf

Kegelförmiger Verlauf, Winkelverlauf, radialer Farbverlauf mit Drehung, kreisförmiger Sektorverlauf oder Rotationsverlauf: Diese Variante eines Verlaufs hat viele Namen.

Während ein einfacher Kreisverlauf die Farben von einem Punkt zum Rand des Kreises ändert, ändert ein konischer Verlauf die Farben um den Punkt herum. Er ähnelt einem radialen Verlauf, nur dass die Eckpunkte der Farben kreisförmig um einen Punkt angeordnet sind, während sie bei einem radialen Verlauf von einem Punkt aus zum Rand eines gedachten Kreises verteilt sind.

Ein konischer Verlauf entsteht durch CSS background-image und passt sich an die Form seines umgebenden Elements an.

.conic-circle {
	width: 280px; height: 280px;
	background-image: conic-gradient(yellowgreen 40%, gold 0 70%, #f06 0);
	border-radius: 50%;
}

Die Bezeichnung »konischer Verlauf« rührt von der Wirkung eines konischen Verlaufs von einer hellen zur dunkeln Farbe mit einem harten Übergang: Der Verlauf sieht aus wie ein Kegel von oben aus betrachtet. Darum wird dieser Verlauf auch als Kegelförmiger Verlauf bezeichnet.

Tortengrafik und Sterne mit conic gradient

In einem Verlauf müssen Farben nicht weich ineinander verlaufen. Ein Verlauf bildet harte Grenzen, wenn zwei Farben auf kürzester Strecke wechseln.

So entstehen Sterne, Tortengrafiken (pie chart) und Sonnenstrahlen ohne hinterlegtes Bild.

.torte {
	background-image: conic-gradient(tomato 40%, khaki 0 70%, powderblue 0);
	border-radius: 50%;
}

.sun {
	background-image: repeating-conic-gradient(paleturquoise 0 15deg, lightblue 16deg 30deg);
}

.star {
	background-image: repeating-conic-gradient(hsl(50,90%,84%) 0 36deg, hsl(50,80%,70%) 36deg 72deg);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}