Gradient backgrounds are a cool way to add color and dimension to your projects or HTML elements using CSS, but did you know there’s actually a way to make gradient backgrounds even cooler? It can be done the same way that you would make anything cooler using CSS — by adding some animations.
The code snippet below demonstrates how to take a basic gradient effect and animate it on hover. The type of gradient, colors of the gradient, and animation time can all be completely customized. Take a look at the code to see how it works.
.box {
background-image: linear-gradient(#a4aae4, #f2b8f2);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.3s;
}
.box:hover {
background-position: 0 0;
}
As you can see, by changing the background position on hover and defining a transition property, the gradient should appear to move or be animated for the duration of the animation transition effect (in this example, .3 seconds) when the .box element is hovered upon by the user. For a longer, more pronounced animation, add some time to the transition effect, or make the change in background position more drastic and pronounced.