# CSS: “fill”: “linear-gradient(X)” is not a “fill” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-fill-linear-gradient-x-is-not-a-fill-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The CSS `fill` property does not accept `linear-gradient()` as a valid value.

The `fill` property is used primarily with SVG elements to define the color that fills the interior of a shape. It accepts simple color values like named colors, hex codes, `rgb()`, `hsl()`, `currentColor`, `none`, or a reference to an SVG paint server using `url()`.

CSS gradients such as `linear-gradient()` are classified as `<image>` values, not `<color>` values, so they cannot be used directly with `fill`. This is different from properties like `background` or `background-image`, which do accept gradient values.

If you need a gradient fill on an SVG element, you should define a `<linearGradient>` inside an SVG `<defs>` block and reference it with `url()`.

## How to fix it

**Invalid:** Using `linear-gradient()` with `fill`:

```html
<svg width="100" height="100">
  <rect width="100" height="100" style="fill: linear-gradient(to right, red, blue);" />
</svg>
```

**Valid:** Using an SVG `<linearGradient>` definition:

```html
<svg width="100" height="100">
  <defs>
    <linearGradient id="myGradient" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
  <rect width="100" height="100" fill="url(#myGradient)" />
</svg>
```

The `x1`, `y1`, `x2`, and `y2` attributes on `<linearGradient>` control the direction of the gradient. In this example, `x1="0" x2="1"` creates a left-to-right gradient, equivalent to `to right` in CSS.