Transitioning Gradients

Keith J. Grant:
In CSS, you can’t transition a background gradient. It jumps from one gradient to the other immediately, with no smooth transition between the two.
He documents a clever tactic of positioning a pseudo element covering the element with a different background and transitioning the opacity of that pseudo element. You also need a little z-index trickery to ensure any content inside stays visible.
Gosh, I remember a time not so long ago pseudo elements weren’t transitionable!
I …

Transitioning Gradients is a post from CSS-Tricks

Link: http://keithjgrant.com/posts/2017/07/transitioning-gradients/