# CSS: “X”: The first argument to the “linear-gradient” function should be “to Y”, not “Y”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-x-the-first-argument-to-the-linear-gradient-function-should-be-to-y-not-y
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<style>
  .banner {
    background-image: linear-gradient(top, #ffffff, #dddddd);
  }
</style>

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

## Valid example

```html
<style>
  .banner {
    background-image: linear-gradient(to bottom, #ffffff, #dddddd);
  }
</style>

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