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.
Theflood-colorCSS property defines the color of the current filter primitive subregion in<feFlood> and<feDropShadow> elements within a<filter>. If present, it overrides the element'sflood-color attribute.
Note:Theflood-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 offlood-color, and how the CSSflood-color property takes precedence over theflood-color attribute.
HTML
We have an SVG with two<filter> elements, each with a<feFlood> child. Each<feFlood> element includes the SVGflood-color attribute defining the flood color asseagreen. 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> <feFlood flood-color="seagreen" /> </filter> <filter> <feFlood flood-color="seagreen" /> </filter> <rect filter="url(#flood1)" /> <rect filter="url(#flood2)" /></svg>CSS
We define the size and position of our<rect> using the CSSheight,width,x, andy 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 CSSflood-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 CSSflood-color values.
Specifications
| Specification |
|---|
| Filter Effects Module Level 1 # FloodColorProperty |