Artyom Ryazhenkov2018-02-21 08:00:10
Artyom Ryazhenkov, 2018-02-21 08:00:10

Animating gradients?

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 the question

In order to leave comments, you need to log in

1 answer(s)
Dima Polos, 2018-02-21

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.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question