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.
More CSS Tips
- A reveal animation with a rotating square a fancy animation on hover using clip-path.
- A reveal hover effect using CSS mask II Use CSS mask to create a nice reveal effect on hover.
- Corner-only borders with hover effect A simple trick to add corner-only borders to your image.
- Overlapping border on images with hover effect Add an overlapping border to your image with cool hover effect.