Jump to content
Search Community

Linear gradient problem

Lasercode test
Moderator Tag

Go to solution Solved by OSUblake,

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

Hello Lasercode,


To get it to work cross browser you have to include -webkit-linear-gradient for webkit based browsers due to Chrome not working without it anymore.


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


You have to either do a check for webkit based browsers inside your onUpdate:

// see codepen for what 'isChrome' equals
    TweenLite.set(element, {background:"-webkit-linear-gradient(top," + colors.top + ", " + colors.bottom + ")"});
} else {
    TweenLite.set(element, {background:"linear-gradient(to top," + colors.top + ", " + colors.bottom + ")"});

Or you have to include both set zero based tweens so it can apply to Chrome within the onUpdate:

TweenLite.set(element, {background:"-webkit-linear-gradient(top," + colors.top + ", " + colors.bottom + ")"});
TweenLite.set(element, {background:"linear-gradient(to top," + colors.top + ", " + colors.bottom + ")"});


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



Link to comment
Share on other sites

Yes you still need it.. Chrome didn't need it in Chrome 26 .. but around Chrome 28-29 they changed syntax again and you needed it again.


Its best to use both if you want make sure it will always work while the Chrome Dev team makes up their mind..


Plus you want it to work for Android and iOS versions that require the -webkit prefix


You can see that this fork of my codepen does not work on latest Chrome on Windows 7 (64-bit) and Windows 11 (64-bit) with no webkit prefix


Test in Chrome.. you notice without webkit it does not work:

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


You can see in my various forum posts regarding CSS linear-gradients that I document Chrome changing what was supported. Carl can attest to this!


I have had to check it every month for 3 years since Chrome dev team keeps changing their implementation of CSS gradients. The same goes for CSS radial gradients.


Always test the browsers for yourself.. never trust canisue or compatibility charts when it comes to webkit.


Webkit based browsers always changes and they play the Mr. Potato game of adding, removing, add back, and remove again.


Working cross browser CSS linear gradient:

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


Working cross browser CSS radial gradient

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


Always test each browser for yourself ;)



  • Like 2
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.
  • Create New...