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!
Transitioning Gradients is a post from CSS-Tricks