The flood-color CSS property defines the color of the current filter primitive subregion in <feFlood> and <feDropShadow> elements within a <filter>. If present, it overrides the element's flood-color attribute.

Syntax

/* <color> values */
flood-color: red;
flood-color: hsl(120deg 75% 25% / 60%);
flood-color: currentColor;

/* Global values */
flood-color: inherit;
flood-color: initial;
flood-color: revert;
flood-color: revert-layer;
flood-color: unset;

Values

<color>

The flood's color. This can be any valid CSS <color> value.

Formal definition

Formal syntax

flood-color = 
  <color>  

Examples

Defining the color of a filters flood

This example demonstrates the basic use case of flood-color, and how the CSS flood-color property takes precedence over the flood-color attribute.

HTML

We have an SVG with two <filter> elements, each with a <feFlood> child. Each <feFlood> element includes the SVG flood-color attribute defining the flood color as seagreen. We included two <rect> elements with a filter attribute; this is where the filters will be displayed.

<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg">
  <filter id="flood1">
    <feFlood flood-color="seagreen" />
  </filter>
  <filter id="flood2">
    <feFlood flood-color="seagreen" />
  </filter>

  <rect id="r1" filter="url(#flood1)" />
  <rect id="r2" filter="url(#flood2)" />
</svg>

CSS

We define the size and position of our <rect> using the CSS height, width, x, and y properties:

rect {
  width: 100px;
  height: 100px;
  x: 10px;
  y: 10px;
}
#r2 {
  x: 150px;
}

We then apply different flood color values to the <feFlood> elements using the CSS flood-color property. We use a named color and a 3-digit hexadecimal color, but we can use any valid CSS color syntax:

#flood1 feFlood {
  flood-color: rebeccapurple;
}
#flood2 feFlood {
  flood-color: #ff3366;
}

Results

The attributes defined the squares as seagreen, but these values were overridden by the CSS flood-color values.

Specifications

Browser compatibility

See also

• flood-opacity
• color
• fill
• lighting-color
• stop-color
• stroke
• box-shadow
• text-shadow
• background-color
• <color>
• <filter-function>
• SVG flood-color attribute