Анимация градиентов?

Здравствуйте!
Ситуация такова - на странице нужно сделать несколько элементов с переливающимся градиентом на заднем фоне. Однако у всех цвета во время перелива должны быть разными. Для исполнения первого элемента использовал этот код:

.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 - это сам элемент
.pure - задаю исходный цвет (пусть у всех он должен быть одинаковым)
@keyframes background - анимация

Какой код нужно написать, чтобы у всех элементов цвета во время перелива были разными?