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 figured as long as we’re using a pseudo element here, I’d document a few others ways as well. We could always move the position of a longer element, making it look like a gradient transition. Or, we could use a half-transparent gradient and transition a solid background behind it.
