CSS: How to make a gradient animation and improve your websites

Hello World! The second episode of the series - A CSS/JS trick in 5 minutes - Last Article was about a Javascript trick (How to have a random background color change). This time I want to show you a CSS trick: How to make a gradient animation.

We need two things, first to style the div that will be animated (it can also be the body):

.container {
/*Marine gradient: Grey, blue, violet, grey again */
  background: linear-gradient(
    -45deg,
    #bdc3c7,
    #2c3e50,
    #c33764,
    #1d2671,
    #141e30,
    #6dd5ed
  );
  background-size: 400% 400%;
  animation: backgroundChange 15s ease infinite;
}

I recommend you to write a comment in the code with the colors rather than just Hex values. Remember that the last hex in code will be the first color displayed. Change the animation direction with the degrees parameter (in this case, the animation will go from top left to bottom right). You can also change duration in seconds and animation type after that.

Then you add the animation. In reality colors don't change, we are just moving the background:

@keyframes backgroundChange {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

You can easily add parts (25%, 75%) to change the animation how you need.

You can have here a live preview:
Click Me

Hope this helped and thanks for reading!

Please smash that like button to make me understand that you want the series to continue :)

Check this article: The ultimate compilation of Cheat sheets (100+) - 🎁 / Roadmap to dev 🚀

Subscribe to our newsletter!

A loooong, and fun, weekly recap for you
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!