In gradient arguments, CSS variables followed by percentages are misread.

[tmb-github]

When a CSS variable is followed by a percentage (%) in a gradient argument, the validator is confused and erroneously reports an error. For example:

<style>
.header {
    background-image: radial-gradient(circle, var(--anchor-color) 10%, transparent 8%);
}

.main {
    background-image: radial-gradient(circle, var(--anchor-underline-color) 20%, transparent 9%);
}

.footer {
    background-image: linear-gradient(var(--footer-background-start-gradient), var(--footer-background-color) 50%);
}
</style>

...triggers the following error messages:

Error: CSS: background-image: 10% is not a color value.
transparent 8%);↩ }↩↩ .
Error: CSS: background-image: 20% is not a color value.
nsparent 9%);↩ }↩↩ .
Error: CSS: background-image: 50% is not a color value.
ound-color) 50%);↩ }↩ </

Notice that it is not confused by the CSS variable that is used as the first argument of the linear-gradient rule, but it is confused by the CSS variable that is used as the second argument in the same rule, which is followed by a percentage. This CSS is interpreted correctly in browsers.

[tyrayner]

The use of var() colors inside radial-gradient causes problems even without percentages. Without percentage values, the error is:
Error: CSS: background-image: too few values for the property radial-gradient.

[sideshowbarker]

The current CSS variables support in the HTML checker is just a hack/workaround and has a number of limitations like the ones mentioned in this issue. The limitations are probably going to continue to exist until the CSS-checking backend gets real variables support. The issue where that’s being tracked is w3c/css-validator#111

[sideshowbarker]

Fixed by recent updates to the CSS-checking backend.