• Background gradient turns into solid color

I’m trying to set a BG gradient. I want one side to be almost solid, and the other side with 50% opacity (white color on both ends, but different opacity). But as soon as I try to change color or color opacity, it automaticly turns into solid color. I’ve also tried with different colors, but still it turns into one solid color.

Image 1: So far so good

Img 2: I clicked on black to change color, but as you can see over color scheme, the gradient has already turned into solid color, even before I have change anything.
gradient 2

Please help @Waldo , @Brando … or anyone? :slight_smile:

My Share link:
https://preview.webflow.com/preview/filigree?preview=43b6092a35c8a6d1379f0b07318817d1

1 Like

Trying to understand exactly what you are going for. It has the solid color automatically yes, but you can bring the slider down on the opacity.

So you want half the slide to be black? grey but then want to have white on either side of the image?

like this?

image

Well, that is my point… I open the gradient, and even before I start to do any changes at all in the gradient panel, it automatically turns into solid color. So no matter what changes I do in the gradient panel, it turns out solid color.

1 Like

But my point is as you can see in the image I posted you can adjust the slider in the gradient to be whatever opacity you want. So I’m not sure what the problem is. Click the color desired and then slide the opacity slider to suit what opacity you want. Another solution is to put the image in it’s own div and set a graient to the background of that.

The thing is, as soon as I click on the slider, it goes from gradinet to solid color. To turn the opacity on solid color down will not make the same effect. So when you use/set different sliders as shown in your image, it still says Linear gradient on top of the window. If you take a closer look at the second img I posted, you will see that Linear gradient turned to Solid color…I open the gradient, but it turn in to solid color. I don’t know any other way to explain it, other than it is a very odd behavior.

Here’s a short video on what is happening.

https://app.hyfy.io/v/abjhqq7d3uU/

That is a bug. I never noticed it because I started on the right side and changed the white to transparent. Then it seems it stays a gradient but that other behavior is a bug and you should report it. I tried to do the same thing you did and it changed it to solid color. Only workaround for right now would be to adjust the right side first I guess. Then it will allow you to do the things in my first picture.

Well, hopefully they will see my post here and figure out how to fix it.
But thank you so much for all your effort to try to help me out @jbleroux, I really appreciate it!

1 Like

Hi @Sven_Erik_Slattedale

Thank you for reaching out and for bringing this to our attention! This is an issue that the team is working on. I’ll let you know when we push a fix for it.

The issue is that when you set the same color for both ends of the gradient, it changes to a solid color.
As a workaround, first set the opacity before changing the color.

https://cl.ly/3C0z3w1f3R0p/Screen%20Recording%202017-09-25%20at%2010.12%20AM.gif

3 Likes

Thank you @AnnaKelian , Helps a lot :slight_smile:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.