HTML Guides for fill

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:

<svgwidth="100"height="100">

<rectwidth="100"height="100"style="fill:linear-gradient(to right, red, blue);"/>

</svg>

Valid: Using an SVG <linearGradient> definition:

<svgwidth="100"height="100">

<defs>

<linearGradientid="myGradient"x1="0"y1="0"x2="1"y2="0">

<stopoffset="0%"stop-color="red"/>

<stopoffset="100%"stop-color="blue"/>

</linearGradient>

</defs>

<rectwidth="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.