Changing size of gradient causes it to fade

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%.

>Solution :

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>