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!

If you enjoy this content consider following me on twitter