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>

In the standard linear-gradient() syntax, a side keyword such as top or left must follow the word to, so a gradient whose first argument is a bare keyword is invalid.

The bare form comes from the vendor-prefixed gradients that browsers shipped before the syntax was standardized, such as -webkit-linear-gradient(top, #fff, #000). There, the keyword names the side where the gradient starts. The CSS Images specification changed that: the keyword now comes after to and names the side where the gradient ends. Older stylesheets often repeat the prefixed declaration without the prefix, which leaves the old argument inside the standard function. Current browsers ignore that whole declaration, so the gradient only appears when an earlier prefixed declaration provides it. The validator reports the error on any property that takes an image, such as background, background-image, border-image or list-style-image, and on repeating-linear-gradient() as well.

Writing exactly what the message suggests flips the gradient. The old top means "start at the top", so linear-gradient(top, #fff, #000) was meant to paint white at the top and black at the bottom, while to top paints white at the bottom. To keep the intended look, point to the opposite side: top becomes to bottom, bottom becomes to top, left becomes to right, and right becomes to left. For a corner such as top left, the message names only the first keyword, but both change, so it becomes to bottom right. Because to bottom is the default direction, a gradient that started with top can also drop its first argument.

Invalid example

<style>

.banner {

background-image: linear-gradient(top, #ffffff, #dddddd);

}

</style>

<div class="banner">Free shipping on all orders</div>

Valid example

<style>

.banner {

background-image: linear-gradient(to bottom, #ffffff, #dddddd);

}

</style>

<div class="banner">Free shipping on all orders</div>