Jump to content


animating css gradients

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I wish to animate a css gradient 
but apparently greensock cant do this

However it can change any numeric value of a javascript object

Could i get the effect i want by doing the following

1) Making a javascript object which stores RGB values for each color I want in my gradient.
2) Using greensock to "animate" the values stored in the javascript object.
3) Setting a JS timer which runs 30 times a second
4) Making a function which changes the css gradient colour value properties with the values from the javascript object (and using the timer to run it)

If yes
Would doing this cause me to loose the benefit of greensocks speed?

Link to comment
Share on other sites

Hello megaman,


GreenSock can animate CSS gradients with great ease!


You just have to make sure your CSS gradient syntax is correct.


Here is an example of a cross browser linear-gradient tween


See the Pen vJwzD by jonathan (@jonathan) on CodePen


And here is a cross browser radial-gradient tween:


See the Pen BeJwd by jonathan (@jonathan) on CodePen



MDN Using Gradients: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients

MDN Linear Gradients: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

MDN Radial Gradients: https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient

CSS Tricks Gradients: https://css-tricks.com/css3-gradients/



Happy Tweening! :)

  • Like 2
Link to comment
Share on other sites

  • 1 year later...


I know this is an old thread, but I came here once before and noticed that Jonathan's linear gradient example is not working for me. The radial one is ok.

Link to comment
Share on other sites

Hello @Lasercode and Welcome to the GreenSock forum!


Try this example. I edited my previous codepen. Chrome has a habit of changing the way the syntax for CSS gradients are done since the CSS spec ins't written in stone yet. Chrome requires the -webkit prefix to work properly.


Now webkit based browser like Chrome want backgroundImage (background-image) but non webkit browsers accept the background shorthand syntax.


This one does it without the check if the browser is Chrome or not. having webkit and non webkit syntax in one tween set():


See the Pen jZjdZr by jonathan (@jonathan) on CodePen


And this one does it with a check if Chrome or not (older way) :


See the Pen vJwzD by jonathan (@jonathan) on CodePen


Happy Tweening :)




  • Like 3
Link to comment
Share on other sites

  • 3 weeks later...

Hey, thanks for the fix.

Smart ass comment: I noticed that your initial gradient flips once you hover. Not that important, I admit ;).
But if you wanna fix that too, the error is that you use "to top" in your colorize function, but then use the top param first, and then the bottom one. If you switch them, it's fine and dandy:


function colorize(element) {
  //apply the colors to the element
    TweenLite.set(element, {backgroundImage:"-webkit-linear-gradient(top," + colors.bottom + ", " + colors.top + ")",background:"linear-gradient(to top," + colors.bottom + ", " + colors.top + ")"});

(Even less imporant: I am a humble member since '12, but thanks for welcoming me :D )

  • Thanks 1
Link to comment
Share on other sites

Thanks for the heads up @Lasercode,


I had the -webkit-background-image commented out for the CSS rule #demo that was causing that. I just had to un-comment it out and swap the blue and yellow in the CSS rule. It was commented out due to how Chrome constantly changing the way the new and old syntax work for linear-gradient. You should see it work as it should in both Chrome and Firefox.


See the Pen jZjdZr by jonathan (@jonathan) on CodePen


Happy Tweening!

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.