CSS：值错误：背景图像是不正确的运算符）（验证失败）

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

Looks like the validator is failing when you use multi-position color stops https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()#gradient_with_multi-position_color_stops

If you remove the second position for things like #ff5722 10% 15% (try something like #ff5722 15% ) it doesn't show the error.

I believe it's an issue with the validator and not with your code though, it's valid CSS, it even fails with code copied straight from MDN.

If you really want to remove that validation error, you can split the color stop in 2 instead of using multi stops like #ff5722 10%, #ff5722 15%

Answer 2

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); 
   }