In this article
The <feFlood> tag is an SVG primitive used to fill an entire region with a uniform color.
It is generally used in combination with other primitives to create visual effects, such as shadows or color blends.
Good to know
Use <feFlood> to fill a region with a uniform color and combine it with other filters for more complex effects.
Structure and syntax of the <feFlood> tag
The <feFlood> tag is always used within an <svg> tag.
Here is a simple example:
HTML
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="floodExample">
<feFlood flood-color="blue" result="blueFill" />
<feFlood flood-color="red" result="redFill" />
<feComposite in="blueFill" in2="redFill" operator="xor" result="combined" />
</filter>
</defs>
<rect x="10" y="10" width="180" height="180" filter="url(#floodExample)" />
</svg>In this example:
<feFlood>creates two floods of colors (blue and red);<feComposite>combines the two floods using thexoroperator (for mutual exclusion).
Here is our result:
Main attributes of <feFlood>
| Attribute | Description | Possible values |
|---|---|---|
flood-color | Defines the flood color. | Color name, HEX value, or RGB value (e.g., red, #FF0000, rgb(255,0,0)). |
flood-opacity | Defines the opacity of the flood color. | Number between 0 (transparent) and 1 (opaque). |
result | Gives an identifier to the result of this primitive so that the filter can be reused by other filters. | Arbitrary name (e.g., myFlood). |
Best practices
Always combine your <feFlood> tag with <feComposite> to control how the color is applied.
Also, always remember to assign a result attribute to be able to reuse this primitive in more complex filters.
Browser compatibility
The <feFlood> tag is widely supported by modern browsers:
| Browser | Compatibility |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Edge | Yes |
| Internet Explorer | Partial (IE 10+) |