HTML Guides for gradient

A background value has a comma or slash where the shorthand doesn't allow one, and the usual cause is a gradient whose color stops have positions but no colors.

Each color stop in linear-gradient() or radial-gradient() is a color followed by an optional position, such as #0d47a1 0%. When a theme setting or template variable that should print the color comes out empty, the generated CSS reads linear-gradient(90deg, 0%, 100%). With no colors left, the commas don't separate color stops anymore, and the validator reports , as an incorrect operator. Browsers ignore the whole declaration, so the element gets no background from that rule.

The message can also name /. In the background shorthand, a slash only goes between a position and a size, as in center / cover. Writing url(photo.jpg) / cover or no-repeat / cover, with no position before the slash, triggers the same error.

When the CSS comes from a template, look at the output rather than the source: fill in the missing colors, or skip the gradient when no colors are set.

Invalid example

<div style="background: linear-gradient(90deg, 0%, 100%);">

<p>Banner text</p>

</div>

Valid example

<div style="background: linear-gradient(90deg, #0d47a1 0%, #42a5f5 100%);">

<p>Banner text</p>

</div>