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!
Top comments (0)