Animating gradients?

Question

css

Hello!
The situation is as follows - on the page you need to make several elements with an iridescent gradient in the background. However, all colors during overflow should be different. To execute the first element, I used this code:

.circle {
  max-width: 150px;
  border-radius: 50%;
  height: 150px;
}
.pure {
  background: #ffa8fc;
  animation: background 5.5s infinite alternate;
}
@keyframes background {
  50% {
    background: skyblue;
    box-shadow: 0 -200px 100px -100px #4df92a inset;
  }
}

.circle is the element itself
.pure - I set the initial color (let it be the same for everyone)
@keyframes background - animation
What code should I write so that all elements have different colors during the overflow?

Answer 1

JS code must be written, preferably in canvas, so that there are fewer brakes.
https://m.youtube.com/watch?v=CakNmQEmf1I Here is about working with canvas, look at this channel, in the playlist, maybe you will find something else, in general, look in this direction.