Create CSS Gradient Animations Effortlessly 🌌

Here's a preview of what we'll make 👇

1. Create a gradient

I'll save mine in a variable for easy reuse.

:root {
  --main-gradient: linear-gradient(-66deg, #15162a, #000, #291a33, #000, #381a2c, #000, #121e42);
}

2. Create a container div and add the background

We use background-size to zoom into the gradient.

.container {
  background: var(--main-gradient);
  background-size: 400%;
}

3. Create the animation

This is a basic animation that changes the background-position. Since we zoomed into the gradient it will look like it's moving.

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

4. Add the animation to our container!

.container {
  background: var(--main-gradient);
  background-size: 400%;
  animation: gradient 8s ease infinite;
}

You can check the codepen here

And that's it!

Follow me on twitter for more!