-webkit-linear-gradient CSS works with few values but does not work with many

What is wrong with linear-gradient () ?

I do not see that I do something wrong in your example, it just works like that.

The specification says that the positions of the colors must go in ascending order, and that if a position has a lower value than a previous position in the list, this latter position will automatically have the highest value of the previous elements.

You can see the specification here: link

To understand it easier let's make an example:

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(to right, red, blue 100px, yellow 200px, green);
}

<div></div>

Here I created a gradient that goes from left to right, with red in position 0, blue in 100px, yellow in 100px and green in the end.

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(to right, red, blue 100px, yellow 50px, green);
}

<div></div>

In this second example I only changed the position of the yellow color, to 50px, this value is lower than the previous position (that of blue), which is 100px. Complying with what the specification says, what we see is that the yellow is located in the largest position of the previous elements, in this case 100px of the blue (the red is in 0px).

It is not very clear to me what you want to achieve, but if you want to do it with linear-gradient it is easier if you use the positions in ascending order:

div {
  width: 400px;
  height: 200px;
  background: linear-gradient(49deg, red 20px, pink 50px, blue 100px, yellow 200px, orange 300px, green 350px);
}

<div></div>

One last detail observed in this third example is that the only colors that can have a "solid" portion are the first and the last, as long as you use a position, otherwise the gradient will start from 0px and end in 100% of the container.

.test{
  height:400px;
  background: linear-gradient(49deg, #575757 52px, #f6f6f6 39px, #092432 429px, #736357 173px, #727272 172px, #FFFFFF 491px, #FFFFFF 530px, #092432 480px, #FFFFFF 50px, #E6E6E6 252px, #092432 1075px);
}

<div class="test">
<div>

It works for me (firefox). See if it's the prefix of -webkit.

Try this tool: link It gives you the rules for all browsers.