Color Rotation

Besides linear and radial, CSS has conic gradients. They radiate in a circle (like clock hands).

Where Is This Useful?

1. Charts: Creating " pies " (pie charts) in one line.
2. Abstract Backgrounds: Creating stars or sun rays.
3. Metallic Effects: Imitating highlights on discs.

/* Simple chart: 40% one color, rest — another */
.pie-chart {
  background: conic-gradient(gold 40%, #eee 40%);
  border-radius: 50%;
}

Repeating Gradient

/* 'Rays' effect */
background: repeating-conic-gradient(white 0deg 10deg, blue 10deg 20deg);