How to Create a Scrolling Parallax Website

Flat UI Kit – Free PSD & Code

December 26, 2013 Comments (0) Views: 2834 Coding

Gradient Animation Trick

You can’t animate gradient colors in CSS. No, really. There are a lot of animatable properties, but the one used for gradients, background-image, is not on the list.

Fortunately, if you were looking to animate a simple light-to-dark gradient fade, then there’s a decent workaround. Use background-size to stretch your gradient to be taller than the element it’s on. Now you can animate background-position to slide the visible portion of your gradient up and down. The end result is an element with a smoothly animated gradient background that gets lighter and darker.

And here’s a demo. Hover over the gray box to see the animation.

Check out this Pen!

Tags: #, #, #, #, #, #, #, #, #

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.