Streaming live at 10am (PST)

Is there a way to transition a line of text to gradient on hover?

Hello Webflow community,
I have recently started my first project on Webflow and I would like to know if there is a way to make a transition between hover states with respect to gradients.
The goal is to make the gradient fade in on hover, although I cannot seem to find an option to do so.
Is there any way at all to make this possible?

image >>> image


Here is my public share link: [https://preview.webflow.com/preview/nowapp?utm_medium=preview_link&utm_source=designer&utm_content=nowapp&preview=1f16564ba58ca541c0dc8f7111821bbd&mode=preview]

Thanks for reading,
William

Unfortunately there is no transition for background images/gradients etc.

1 Like

Is that a limitation of Webflow, or would it be implemented in the future?

No, this is a css limitation.

1 Like

Well, there is an ugly workaround where you absolutely position the same word with different background in front of your main word and then make its opacity go to 0 on hover.

1 Like

Hi, what I have found:

  1. you can if you add the gradient on the hover STATE ( using the state selector in the CSS , not by animation)

  2. you can add it in animation by having the element with the gradient on, then add animation FILTERS (Brightness and grayscale or play with the combinations) to make it look like a solid color