flood-opacity

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-opacity CSS property defines the opacity of the current filter primitive subregion in <feFlood> and <feDropShadow> elements within a <filter>. If present, it overrides the element's flood-opacity attribute.

The property value impacts the flood-color's alpha channel; it can increase the transparency of a flood-color but can not make the color defined by the flood-color property more opaque.

Note: The flood-opacity property only applies to <feFlood> and <feDropShadow> elements nested in an <svg>. It doesn't apply to other SVG, HTML, or pseudo-elements.

Syntax

css

/* numeric and percentage values */ flood-opacity: 0.2; flood-opacity: 20%; /* Global values */ flood-opacity: inherit; flood-opacity: initial; flood-opacity: revert; flood-opacity: revert-layer; flood-opacity: unset;

Values

The <opacity-value> is a <number> or <percentage> denoting the opacity of the SVG gradient <flood> element.

<number>: A numeric value between 0 and 1, inclusive.
<percentage>: A percentage value between 0% and 100%, inclusive.

With 0 or 0% set, the flood is fully transparent. With 1 or 100% set, the element is the full opacity of the flood-color value, which may or may not be partially opaque.

Formal definition

Initial value	`black`
Applies to	`<feFlood>` and `<feDropShadow>` elements in `<svg>`
Inherited	no
Computed value	the specified value, clipped in the range `[0,1]`
Animation type	by computed value

Formal syntax

flood-opacity = 
 <'opacity'> 

<opacity> = 
 <opacity-value> 

<opacity-value> = 
 <number> |
 <percentage>

Examples

Defining the flood opacity of a filter

This example demonstrates the basic use case of flood-opacity, and how the CSS flood-opacity property takes precedence over the flood-opacity attribute.

HTML

We have an SVG with a few <filter> elements, each with a <feFlood> child. The <feFlood> define the filters as seagreen, with the first being declared by its flood-opacity attribute as fully opaque and the second being fully transparent. We included two <rect> elements, each with a filter attribute.

html

<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg"> <filter id="flood1"> <feFlood flood-color="seagreen" flood-opacity="1" /> </filter> <filter id="flood2"> <feFlood flood-color="seagreen" flood-opacity="0" /> </filter> <rect id="r1" filter="url(#flood1)" /> <rect id="r2" filter="url(#flood2)" /> </svg>

CSS

We define the height, width, x, and y,positioning of our rectangles with CSS, and include a repeating linear gradient as a background-image on the SVG so the opacity of the flood-color is more apparent:

css

svg { background-image: repeating-linear-gradient( 45deg, transparent 0 9px, #cccccc 0px 10px ); } rect { width: 100px; height: 100px; x: 10px; y: 10px; } #r2 { x: 150px; }

We then apply different flood opacity values to the <feFlood> elements using the CSS flood-opacity: property:

css

#flood1 feFlood { flood-opacity: 0.5; } #flood2 feFlood { flood-opacity: 90%; }

Results

The attributes defined the first square as fully opaque and the second as fully transparent, but these values were overridden by the CSS flood-opacity values. The seagreen filters are 50% and 90% opaque, respectively.

Specifications

Specification
Filter Effects Module Level 1 # FloodOpacityProperty

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on ⁨Oct 30, 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content