CSS, HTML und Javascript mit {stil}

Conic Gradient • Konischer Verlauf

CSS radial gradient – Kreisverlauf

Ein konischer Verlauf – conic-gradient – entsteht, wenn die Farben kreisförmig um den Mittelpunkt eines Elements rotiert werden.

Während ein radialer Verlauf die Farben vom Mittelpunkt zum Rand des Kreises ändert, ändert ein konischer Verlauf die Farben um den Mittelpunkt herum.

18-12-15 SITEMAP

Konischer Verlauf

LINEAR
RADIAL
CONIC

Ein konischer Verlauf ähnelt einem radialen Verlauf, nur dass die Eckpunkte der Farben kreisförmig um den Mittelpunkt angeordnet sind, während sie bei einem radialen Verlauf von der Mitte zum Rand eines gedachten Kreises verteilt sind.

Ein konischer Verlauf ist ein 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%;
   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 betrachtet.

Tortengrafik mit conic gradient

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

So entstehen eine Tortengrafik (pie chart) und Sonnenstrahlen ohne hinterlegtes Bild.

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

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

Browser-Support für conic-gradient

Alle modernen Browser unterstützen CSS conic-gradient – der inzwischen veraltete IE natürlich noch nicht.

Ein Polyfill für alte Browser: https://leaverou.github.io/conic-gradient/conic-gradient.js