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