How to Create A Gradient Animation in CSS

Welcome! In this tutorial, we're going to be taking a look at how you can create a cool gradient animation in CSS. This could be used in a variety of ways, for instance, you could add it as a background to a login form page, or as part of a hero section.

Here's the gradient animation we'll be creating:

Looks pretty cool, right?

Let's get started!

1. Create Container Element

Firstly, create the container element which will contain the gradient animation. In this example, I'll be creating a div element, which has a class added to it called "animated_gradient".

<div class='animated_gradient'></div>

2. Add A Gradient Background

Next, add the following CSS, which will add a gradient background to the element and specify the animation that we'll be adding to the container. In the next section, we'll be adding the keyframes which are required to move the background position of the gradient.

.animated_gradient {
  ⁠background: linear-gradient(90deg, #0062ff, #da61ff);
⁠  background-size: 400% 400%;
  animation: gradient_anim 23s ease infinite;
  height: 40vh;
  width: 50vw;
}

3. Add Keyframes

Then just add the keyframes in order to animate the gradient. This will move the background position of the gradient in order to make it appear as if the gradient is animated:

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

Here's what it looks like:

Here's the full code:

<div class='anim_gradient'></div>

<style>
.anim_gradient {
  background: linear-gradient(90deg,#0062ff,#da61ff);
  background-size: 400% 400%;
  animation: gradient_anim 23s ease infinite;
  height: 40vh;
  width: 40vw;
  margin-bottom: 18px;
}
      
@keyframes gradient_anim {
  0% {
      background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

</style>

If you want to adjust the duration of the animation, you could edit the duration value as part of the animation property. Currently, the animation is set to 23s, but this could be increased or decreased according to the final result you would like to create.

If you'd like to create a full-screen gradient background, then just set the height and width of the container to 100vh and 100vw respectively. It would make for a super cool background for a landing page, for example! 

I'd definitely recommend trying out different colors to see which would work best for your website, there are so many possibilities as to the types of gradients you could create! For instance, you could incorporate indigo and violet tones, for instance, or create a bright pink and orange gradient.

Conclusion

Thanks very much for reading this guide, hopefully you've found it useful for helping you to create an animated gradient! This could add a lovely animated touch to landing page heros, loading screens or it could be used as the backdrop to a signup or login form.

I'm currently working on a new feature of the Isotope Editor, which will allow you to create animated gradient effects that you can quickly export. You can also create variations of the animation by adjusting the colors and so forth. If you're interested, then just subscribe to the Isotope newsletter, and you'll get news about the latest features of the editor, along with any useful frontend-related links/tutorials too.