CSS Gradient Transitions

Image for CSS Gradient Transitions

An issue I came across in one of our ongoing client projects left me feeling cheated. Not being able to transition gradients when hovering on an element! What?!

The default behavior when transitioning from one color to a gradient is to snap from one state to the next, no sexy transition. I refuse to settle for such nonsense, so in my spare time I got my hands dirty to achieve the desired effect I feel that us web devs deserve.

Here we have my sandbox created just for these gradient transitions. From flat/flat, flat/gradient, and dare I say it, GRADIENT/GRADIENT! Relax, this is what I do!

See the Pen Gradient Hover Transition on Buttons by Intuitive Company (@intuitive) on CodePen.

Here we leverage LESS and the ability to think outside the box. Browser support may not be all the way there (IE10+) with fallbacks. However, I was able to achieve my desired effect in more modern browsers which is a positive since I wasn’t able to before.

Take a look at the code, play around with it and let us know what you think!

About the Author

Image of Matt Lewis

Matt Lewis

UX Developer

As a developer with a background in design, Matt is another "double threat" on our team. More