CSS fill Property

The fill property controls the interior painting of vector shapes and text in SVG contexts (and of SVG elements embedded in HTML). It determines what paint is used to cover the inside area of geometry — this can be a solid color, a gradient, a pattern, or another paint server — and that paint is composited into the final rendered image. Conceptually, think of fill as the setting that governs "what's inside" a shape, separate from any outline or border treatment.

In the visual stacking of a shape, the fill is rendered beneath the outline, so its appearance interacts with the element’s stroke and how the two overlap and blend; for that relationship see stroke. Because fill can reference complex paint sources (for example gradients or pattern definitions in SVG), the visual result may depend on the referenced coordinate systems, transformations, and any referenced elements — the fill is often resolved at paint time rather than being a simple color assignment.

The property does not behave like many typical CSS properties in that it normally applies to SVG painting rather than box-model backgrounds; it isn’t inherited by default, but it commonly uses the current text color when the special currentColor value is used, linking its visual result to the element’s color property. In the cascade, a specified fill on an element overrides inherited or user-agent defaults for that element’s interior painting.

When you animate or transition fills, the renderer must interpolate between paint representations — simple color-to-color transitions are straightforward, while transitions between different paint types (for example, a solid color and a gradient) may be handled differently across implementations and sometimes result in discrete switches. Additionally, overall compositing and transparency that affect the final appearance of a fill can be influenced by the element’s and parent context’s opacity settings; see opacity for how a final composite transparency interacts with fills.