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 Kreis 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.

Konischer Verlauf

Ein konischer Verlauf ist ein background-image und passt sich seinem umgebenden Element an. 

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

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

Zurzeit unterstützen nur Chrome und Safari