Background gradient Transitions

Hey all, ive done a little searching and found some older posts that touch on this topic but didnt have a clear solution that helped me. All my buttons on my nav, as well as my help page sidebar links all have gradient backgrounds on hover, and id like to add times transition to this, but it does not seem to be working, any thoughts?


Here is my public share link: https://preview.webflow.com/preview/qualitynode?utm_medium=preview_link&utm_source=designer&utm_content=qualitynode&preview=4ff72df7058be1a302e385d7a52a3f07&pageId=5dd5b0a0b042020e2a25ed1f&mode=preview

Update, since gradients didnt seem to work, ive created a background image with the gradient and used that instead, and its working now. Appreciated everyone. It appears that background gradient is bugged or not supported.

Hi @Aeternum,

Just getting to this.

Actually you can use bg gradient, you just need to setup the effect on hover:

  1. bg image

  2. image

  3. image

Just have to look further

In your cloudapp link you show a background picture being set. Is that how you achieved it? Thats what i ended up doing.

The gradient is set up on hover, and transition on both hover and no state. With no luck.

No, I deleted that bg-image.

What you would do is click that “+” sign, and it will give your 4 options.

  1. Image
  2. Linear Gradient
  3. Radial Gradient
  4. Color

Please let me know if you have any other questions,

~ Happy Designing ~
Brandon

I appreciate your time, but I feel you don’t understand the issue. The gradient has been set, but the transition doesn’t work for background gradient, it is not an option i can select when creating the transition, and it doesn’t seem to be affected when i select all properties in the transition.

It wouldn’t be gradient, but just background for the transition.

The other way would be to use interactions.

So then is transition not supporting background gradient a bug?

As just simply all background effects is not a permitted selection

And all options doesnt effect it either

No, it is working from what I can see.

Just dont use the All as that will drastically slow your site.

Just use the bg color option.

Ok maybe my chrome install is having trouble rendering the transition then? Ill check that out if its working for you.

Shared with CloudApp

Also, all properties isnt like a regex check on the render process or anything, it doesnt have to loop through all styles, it just loops the class assigned to that element, it at most will add a ms or two the DOM load times and should have no impact once rendered.

Ok so its not working for you either, thats an instant change between solid color and gradient, the transition time isnt applying.

For reference of others. It does appear the the current version of webflow simply doesnt reference background image or background gradient when adding transitions, but this does work when writing the css from scratch. In this scenario, I also added a text color change on hover, which tricks the eye into seeing the transition overall even though the background gradient is instant and only the text color actually transitions over the preset amount of time.

Increase the ms delay.

Maxed all the way up to a second to no effect

You are correct. Webflow transitions cannot target gradients and bg images. Not sure if this is just an oversight or some legitimate limitation.

6 Likes

Was anyone actually able to solve this? Haven’t been able to get the transition effect to work for a gradient either

Hey,

Background Transition is a Webflow issue but in a general CSS problem. CSS just does not support it.

If you are looking for a solution, you must combine ::before and z-index.

Here’s a solution:

.gradient {
  position: relative;
  background-image: linear-gradient(
to right,
hsl(211, 100%, 50%),
hsl(179, 100%, 30%)
  );
  z-index: 1;
}

.gradient::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(
to bottom,
hsl(344, 100%, 50%),
hsl(31, 100%, 40%)
  );
  z-index: -1;
  transition: opacity 0.5s linear;
  opacity: 0;
}

.gradient:hover::before {
  opacity: 1;
}

source: Transitioning Gradients

1 Like

I think I understand your issue. It is hovering on a div block but with applied transition time. Like slowly appears black when you hover over a div block.

The answer is I doubled the div block. One with the image and gradient as the parent and relative position. The child div block would be absolute and with a black BG. There you can apply your transition hover time on the child div block.

I know it is too late to answer this but for anyone who have this issue in 2022.