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!
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!