HTML Guides for direction

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>