Transitioning Gradients

Avatar of Chris Coyier
Chris Coyier on

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.

Direct Link →