DEV Community

Cover image for CSS: How to make a gradient animation and improve your websites
Lorenzo
Lorenzo

Posted on • Edited on

7 3

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;
}
Enter fullscreen mode Exit fullscreen mode

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%;
  }
}
Enter fullscreen mode Exit fullscreen mode

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!

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay