Cfrgtkky

There is an ADOBE illustrator generated gradient and the CSS code is as below:

.firs{

    background: #4B79A1;

    background : -moz-linear-gradient(.....) 100%);

    background : -webkit-linear-gradient(.....) 100%);

    background : -webkit-gradient(....),color-stop(.....) ));

    background : -o-linear-gradient(.....) 0%, rgba(......) 0%, rgba(......) 25.17%, rgba(.........) 50.5%, rgba(.......) 75.17%, rgba(.......) 100%);

    background : -ms-linear-gradient(........) 0%, rgba(........) 0%, rgba(.........., 1) 25.17%, rgba(............., 1) 50.5%, rgba(..........., 1) 75.17%, rgba(............., 1) 100%);

}

the gradient CSS runs smoothly in Chrome and Firefox, but in Edge, it becomes like this.

Is there any way to solve this problem?

Did you try code from gradient generator?
I think code like below should works

linear-gradient(to right, rgba(...) 0%, rgba(...) 50%, rgba(...) 51%, rgba(...) 100%)

You have to check your rgba() function. By convention rgb is the mixture or color

panel of red-green-blue colors to produce different type of color. But a(alpha) is

used to optimize the color visualization. 1 is set to true which 100% or visible, 0 

is set to false which is invisible.



As I can see in your code, -ms-linear-gradient(......., 1). You need to understand that 

linear-gradient() function uses top-down, left-right, right-left or bottom-up

approaches. In your case, you are using top-down approach. But the problem is you are

using 100% opacity with edge and you cannot get the gradient correctly. 



Try to optimize your linear function with something like this: 

-ms-linear-gradient(......., 0.5) or -ms-linear-gradient(......., 0.45) which is 

literally translated as 50% or 45% alpha linear.