# CSS: “background”: The first argument to the “linear-gradient” function should be “to top”, not “top”.
> Canonical HTML version: https://rocketvalidator.com/html-validation/css-background-the-first-argument-to-the-linear-gradient-function-should-be-to-top-not-top
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
The `linear-gradient()` function went through several syntax revisions during CSS standardization. Early drafts and vendor-prefixed implementations (like `-webkit-linear-gradient()`) used bare direction keywords such as `top`, `bottom left`, etc., where the keyword indicated the **starting** point of the gradient. The final standard, defined in the CSS Images Module Level 3 and Level 4 specifications, changed this so that direction keywords use the `to` prefix and indicate the **ending** point of the gradient. For example, the old `linear-gradient(top, #fff, #000)` meant "start at the top and go to the bottom," while the correct modern equivalent is `linear-gradient(to bottom, #fff, #000)`.
This matters because the old syntax without `to` is not valid CSS per the current specification. While some browsers may still interpret the legacy syntax for backward compatibility, relying on it is risky — behavior can vary across browsers, and it will trigger validation errors. Using standard-compliant CSS ensures consistent rendering and forward compatibility.
## How to fix it
Replace the bare direction keyword with the correct `to` syntax. Note that the direction meaning is inverted: the old syntax specified where the gradient **starts**, while the new syntax specifies where it **goes to**.
Here's a quick mapping from old to new syntax:
| Old (invalid) | New (valid) | Angle equivalent |
|---|---|---|
| `top` | `to bottom` | `180deg` |
| `bottom` | `to top` | `0deg` |
| `left` | `to right` | `90deg` |
| `right` | `to left` | `270deg` |
| `top left` | `to bottom right` | N/A (use `to` syntax) |
**Important:** Notice that `top` in the old syntax means "start at top, go to bottom." So the modern equivalent is `to bottom`, not `to top`. If the validator message says the argument should be `to top`, it means you wrote `top` — but be sure you understand which direction your gradient should actually go before blindly replacing it. If you truly want the gradient to go **toward the top**, use `to top`. If you want it to go **from the top downward**, use `to bottom`.
If you don't specify a direction at all, `linear-gradient()` defaults to `to bottom` (top-to-bottom), which is often what you want.
## Examples
### Invalid: bare direction keyword
```html
Content
```
The bare keyword `top` is not valid in the standard `linear-gradient()` syntax and will trigger the validator error.
### Fixed: using the `to` keyword
```html
Content
```
Since the old `top` meant "start at the top," the equivalent standard syntax is `to bottom`.
### Fixed: using an angle
```html
Content
```
An angle of `180deg` produces the same top-to-bottom gradient.
### Full document example
```html
Gradient Example
```
All three approaches are valid. Choose whichever is clearest for your use case — the `to` keyword syntax is generally the most readable, while angles offer more precision for diagonal or non-cardinal directions.