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

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:

<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:

<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.

Learn more:

MDN Reference

MDN - CSS fill property

→

MDN Reference

MDN - CSS linear-gradient()

→

MDN Reference

MDN - CSS Gradients

→