The problem

Have you ever been asked by a designer if you could make a transition from one background gradient to another? Something like that should work, right?

.gradient {
  background: linear-gradient(red, blue);
  transition: background 0.2s ease-in
}

.invert {
  background: linear-gradient(blue, red);
}

Well, I did try it when this was part of a design I had to implement this week. Sadly, it doesn't work. The page will instead change suddenly from one gradient to another 😞. And it's pretty understandable. It would be a quite complex feature to take all the pixels of the gradient and compute the transition to another color.

The workaround

This might not work for every issue but for simple gradients, you can clearly use this little hack to get pretty neat visual effects.

The idea is to use a transparent gradient as an overlay and use the simple background-color transition. To obtain a very similar effect.

<div class="container" id="container">
  <div class="gradient"></div>
</div>

.container {
  background: red;
  transition: background 1s ease-in;
  width: 400px;
  height: 400px;
}

.gradient {
  background: linear-gradient(white, transparent);
  width: 100%;
  height: 100%;
}

So, now we have this color gradient from red to white. And if we change the .container color we'll have the 1s ease in transition.

Show me the code

Okay, here's a better example!

See the Pen

Color Gradient</a> by Marc-Antoine Ferland (@maferland)