Adding Colour Transition to Gradient Overlay

Hi Everyone,

Been banging my head against an issue and hoping I might find some help here.

Broken out the problem below.

  • I have a gradient that I’m using as an overlay (to create depth) as a user scrolls through sections and to help create visual contrast for each section’s header (as elements flow underneath it). It only becomes visible when content scrolls up and underneath each section’s header area.
  • I also have set up three colour themes that a visitor can cycle through (using the pillbox in the bottom left corner).
  • When the site transitions from one theme to the next, I’ve set up a fade effect (rather than a hard cut) for a nice smooth, elevated look.
  • This transition is working well with all other elements; however, if you click through each theme, you’ll clearly see that I’ve not been able to apply the transition effect to the gradients; these are still switching with a hard cut only.
  • Hoping someone might be able to make some suggestions on how I can resolve this. (I can go into more detail about what I’ve currently tried, and I’m also happy to share the current custom code).

I’ve shared my preview link below, but it doesn’t look like my theme interactions are viewable. (You can visit my live page here to view the current theme transition and to clearly see the issue with the transition.)

Thanks everyone.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi there,

Webflow offers several ways to work with gradients and color transitions. You can create smooth gradient transitions using background properties, CSS filters, or opacity adjustments. For background gradients, you can set multiple color stops and adjust their positions. When implementing theme switching, consider using CSS custom properties (variables) to smoothly transition between different gradient values.

For more complex color theme transitions, you can utilize Webflow’s interactions panel to create custom animations between states. This allows you to animate gradient properties, opacity levels, and other visual elements when switching between themes.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

Thanks for the comment – good to know that it sounds like what I’m trying to achieve is possible, I’ve currently been trying to implement using custom CSS coupled with with my variables and my colour variable mode.

The colour already switches honoring the variable mode (which is great), it’s just taht it hasn’t been honouring the 1s opacity transition I’ve set for theme switching. I’ll keep banging my head against it.