A color wheel with an array of colors

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

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

• Previous CSS Tip
• Next CSS Tip