CSS flood-color Property

The flood-color CSS property specifies the solid color that is used by a flood painting operation inside a filter chain — most commonly the SVG filter primitive that produces a uniform color region. Rather than painting directly onto the element itself, this color becomes the source image for subsequent filter steps, so it functions as a paint layer that other filter primitives or blend/composite operations can use. In practical terms, it defines the visual "fill" of the flood source that will be composited with other parts of the filter processing pipeline.

When used together with the transparency control provided by flood-opacity, the property enables you to create anything from fully opaque colored backdrops to subtle, translucent tints that affect the look of the filtered content. Because the flood source is just another image in the filter chain, how that color appears in the final rendering depends on the order and types of subsequent filter primitives and compositing steps, and on the overall filter applied to the element via the filter CSS property. Changing the filter chain or the region that the filter covers can dramatically change the visible result of a given flood color.

Design-wise, flood-color is useful whenever you need a uniform color layer inside a complex graphical effect: creating colored backdrops behind blurred content, tinting or recoloring shapes, forming solid masks for compositing, or producing silhouette and glow effects when combined with other primitives. It is scoped to filter contexts (it does not directly repaint an element’s box), so consider filter region size and complexity when using it — large or frequently changing filter regions can increase rendering cost. Also avoid relying solely on colored filter effects to convey essential information, since they can be modified or disabled in some browsing environments and may affect contrast and accessibility.