Changing size of gradient causes it to fade

Question

I have a linear gradient. This is my code:

background: linear-gradient(145deg, #3fd8f6 50%, #609210 50%);

It looks like this:

I want to change it so that the blue part is smaller than the green part. So I changed my code to this:

background: linear-gradient(145deg, #3fd8f6 30%, #609210 70%);

But that causes the gradient to fade:

I can get the blue part smaller than the green if I use "to left" instead of "145deg" but then my gradient won't be skew... it will just be a straight line, and that is not what I want.

How can I get it to still look like the first image but where the blue part is smaller than the green? For example: blue 30%, and green 70%.

the percentage is not size, it's the color stop. They both need to be the same if you don't want any fading — Temani Afif, May 11 '23 at 10:37
Does setting a background-size help in your situation, as explained here? https://stackoverflow.com/questions/51731106/using-percentage-values-with-background-position-on-a-linear-gradient — CBroe, May 11 '23 at 10:42
background: linear-gradient(145deg, #3fd8f6 30%, #609210 10%); — Developer, May 11 '23 at 10:49

score 0 · Accepted Answer · answered May 11 '23 at 10:39

You need to set both to stop at the same place if you don't want the colors to fade, so you could set it to 30% for both if you want the fade to be at 30% for blue.

background: linear-gradient(145deg, #3fd8f6 30%, #609210 30%);

.gradient {
background: linear-gradient(145deg, #3fd8f6 30%, #609210 30%);  
width: 600px;
height: 100px;
}

<div class="gradient"></div>

Changing size of gradient causes it to fade

1 Answers1