Gradient - Starting with the same color on both ends

Community resources General
1

When I want to create a subtle gradient, I start with a specific color at one side of the bar. Then, at the other side of the bar I want to start with the exact same color, and from there to change it slightly in the color space.
The problem is, that as soon as the webflow interface recognises I chose 2 identically colors, it changes the style to a solid color :tired_face:
Live: Gradients on Webfow - YouTube

Am I the only one who’s dealing with this? :sweat_smile:

2

Hi @Avivtech, you’re not alone. I have this exact same problem, which has been frustrating on the previous two websites I’ve created given the gradients in use.

To be honest, sir really subtle gradients I ended up hand-coding a gradient class called .blendo, and a class in the Designer called .blendo, and the gradients are added on export/publish. This was less frustrating than the solid color switch you are also experiencing. :confused:

Anyone else having the issue?

Steve

3

:rofl: oh my! you ended up hand coding gradient!?

I use a workaround- I start with one color and reduce it’s opacity to 99%, then I edit the 2nd color, then I go back and reset the 1st color’s opacity back to 100%…

1 Like
4

I tend to use subtle gradients a lot, the inner rage this sets off in me is unreal. I’ve never thought to set one to 99 and work from there, nice idea!

5

oh my! ended up hand coding gradient!

I googled the code, it’s not tooooo bad :wink:

.blendo { background: -webkit-linear-gradient(60deg, #00aaff, #bfff00); background: -moz-linear-gradient(60deg, #00aaff, #bfff00); background: -o-linear-gradient(60deg, #00aaff, #bfff00); background: -ms-linear-gradient(60deg, #00aaff, #bfff00); background: linear-gradient(60deg, #00aaff, #bfff00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

I use a workaround- I start with one color and reduce it’s opacity to 99%, then I edit the 2nd color, then I go back and reset the 1st color’s opacity back to 100%…

That’s a nice workaround, thanks for the hint :wink:

Steve