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
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: #ff3366;
}
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
Loading…