CSS: Value Error : background-image is an incorrect operator ) (validation fails)

Question

Why is the following CSS invalid according to https://validator.w3.org/nu/#textarea (check the CSS box), yet browsers render the code just fine?

.color {
    background-image: linear-gradient(to right, rgb(248, 27, 27) 7%, #ff5722 10% 15%, #43a047 50% 60%, #7e57c2 92%, indigo);
}

Value Error : background-image is an incorrect operator

.color {
  background-image: linear-gradient(to right, rgb(248, 27, 27) 7%, #ff5722 10% 15%, #43a047 50% 60%, #7e57c2 92%, indigo);
  background-clip: content-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

p {
  background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
}

<p class="color">testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content testing</p>

<p>testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content testing content</p>

Answer 1

it's related to the double color stops #ff5722 10% 15%. The validator seems to be not up to date with this new syntax. You can update your code and use:

.color {
     background-image: linear-gradient(to right, rgb(248, 27, 27) 7%, #ff5722 10%, #ff5722 15%, #43a047 50%, #43a047 60%, #7e57c2 92%, indigo);
     background-clip: content-box;
     -webkit-background-clip: text; 
     -webkit-text-fill-color: transparent;
   } 
p {
   background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red); 
   }