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
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
BCD tables only load in the browser