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

css
/* <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 valueblack
Applies to<feFlood> and <feDropShadow> elements in <svg>
Inheritedno
Computed valueas specified
Animation typeby 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.

html
<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:

css
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:

css
#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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
flood-color

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also