"<feFlood>"

<feFlood> fills a rectangular region with a solid color. Think of it as a filter-graph paint bucket that stamps a flat rectangle of color onto the filter canvas. Unlike most filter primitives, it doesn't take an input image at all — it just produces pixels of a single color and opacity.

<feFlood> is rarely used alone because painting a solid rectangle on top of your shape simply hides it. Instead, it's almost always combined with another primitive such as "<feComposite>" or "<feMerge>" to tint, recolor, or backdrop the source graphic.

• DOM object: SVGFEFloodElement
• SVG2 spec: https://www.w3.org/TR/filter-effects/#feFloodElement

What region does it fill?

The flood fills the filter primitive subregion — a rectangle defined by the x, y, width, and height attributes on the <feFlood> element itself (these are inherited from the standard filter primitive attributes). If those attributes are omitted, the flood fills the entire filter region of the parent <filter> element, which by default extends 10% beyond the source graphic's bounding box on every side.

The example below shows a 200×120 shape with a filter that floods orange. Because the filter region extends past the shape, the orange rectangle is actually larger than the shape itself:

Example 1: flood as the only filter output

The simplest possible filter. The <feFlood> produces orange, and because no other primitive runs, the output is that orange. The original blue rectangle's geometry is completely replaced by the flood rectangle — notice the shape outline is lost:

<filter id="FloodOnly">
  <feFlood flood-color="orange" flood-opacity="0.6" />
</filter>
<rect width="90" height="70" fill="steelblue" filter="url(#FloodOnly)" />

Example 2: flood + composite to tint a shape

This is the canonical use of <feFlood>. The flood produces an orange rectangle, then <feComposite operator="in" in2="SourceGraphic"> keeps the flood only where the source graphic is opaque. The result is a version of the shape recolored to orange, preserving its exact silhouette:

<filter id="Tint">
  <feFlood flood-color="orange" result="f" />
  <feComposite in="f" in2="SourceGraphic" operator="in" />
</filter>
<circle cx="50" cy="50" r="35" fill="steelblue" filter="url(#Tint)" />

Example 3: flood as a backdrop behind a blurred shadow

Here the filter first produces a light-yellow backdrop with <feFlood>, then blurs the source graphic, then merges the backdrop, the blurred shadow, and the original shape on top. The backdrop becomes a colored card behind the object:

<filter id="Card" x="-20%" y="-20%" width="140%" height="140%">
  <feFlood flood-color="#fff3c4" result="bg" />
  <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
  <feMerge>
    <feMergeNode in="bg" />
    <feMergeNode in="blur" />
    <feMergeNode in="SourceGraphic" />
  </feMerge>
</filter>

Attributes

Attribute	Default	Description
flood-color	black	CSS color used to paint the region. Also accepts CSS currentColor.
flood-opacity	1	Number in [0, 1] controlling the alpha of the flood.

Note: the region filled by the flood is controlled by the standard primitive attributes (x, y, width, height), not by these attributes.

Inherits standard filter primitive attributes (in, result, x, y, width, height) from donner::svg::SVGFilterPrimitiveStandardAttributes.