flood-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

Note: The flood-color property only applies to <feFlood> and <feDropShadow> elements nested in an <svg>. It doesn't apply to other SVG, HTML, or pseudo-elements.

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

Initial value	`black`
Applies to	`<feFlood>` and `<feDropShadow>` elements in `<svg>`
Inherited	no
Computed value	as specified
Animation type	by computed value

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: #f36;
}

Results

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

Specifications

Specification
Filter Effects Module Level 1 # FloodColorProperty

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`flood-color`	5	12	3	15	6	18	4	14	6	1.0	4.4