Firefox Tomorrow

css property

`flood-color` CSS property

View on MDN ↗

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

This property is specified as one <color> value:

Formal definition

Formal syntax

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

Interactive exampleOpen the canonical MDN source to run this embedded demo.

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

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also