CSS Tip

A color wheel with an array of colors

July 18, 2023

Create a perfect color wheel with multiple colors using conic-gradient()

One variable to define all the colors
No color duplication
Smooth transition between all the colors

A color wheel using conic-gradient

.box {
   /* your colors without duplication */
  --colors: green,yellow,red,blue,pink;

  background: conic-gradient(var(--colors) 0,var(--colors));
}

See the Pen Color wheel with colors array by Temani Afif (@t_afif) on CodePen.

More CSS Tips