In, css, you can't transition a background gradient.
Download Css Transition Background Image Linear Gradient
Gif. It jumps from one gradient to the other immediately, with no smooth transition between the two. Since we can't transition css gradients (to another gradient) yet, i've provided a lil' workaround using a pseudo element.
Pure Css Gradient Background Animation from assets.codepen.io
We can create a gradient radial background gradients work just like linear gradients and share many of the same values. Css gradient border & rounded corner buttons. This is why animating css gradients is an issue.
There is a zoom, and a a technique i have used before is setting up css classes for each transition between backgrounds.
Before sharing source code, let's talk about it. You can also set a starting point and a direction (or an angle). Hover over one element to affect another. These transitions are shown as either linear or transitions in linear gradients occur along a straight line determined by an angle or direction.
