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.
Theflood-opacityCSS property defines the opacity of the current filter primitive subregion in<feFlood> and<feDropShadow> elements within a<filter>. If present, it overrides the element'sflood-opacity attribute.
The property value impacts theflood-color's alpha channel; it can increase the transparency of aflood-color but can not make the color defined by theflood-color property more opaque.
Note:Theflood-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
/* 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
0and1, inclusive.<percentage>A percentage value between
0%and100%, inclusive.
With0 or0% set, the flood is fully transparent. With1 or100% set, the element is the full opacity of theflood-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 offlood-opacity, and how the CSSflood-opacity property takes precedence over theflood-opacity attribute.
HTML
We have an SVG with a few<filter> elements, each with a<feFlood> child. The<feFlood> define the filters asseagreen, with the first being declared by itsflood-opacity attribute as fully opaque and the second being fully transparent. We included two<rect> elements, each with a filter attribute.
<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg"> <filter> <feFlood flood-color="seagreen" flood-opacity="1" /> </filter> <filter> <feFlood flood-color="seagreen" flood-opacity="0" /> </filter> <rect filter="url(#flood1)" /> <rect filter="url(#flood2)" /></svg>CSS
We define theheight,width,x, andy,positioning of our rectangles with CSS, and include a repeating linear gradient as abackground-image on the SVG so the opacity of the flood-color is more apparent:
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 CSSflood-opacity: property:
#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 CSSflood-opacity values. The seagreen filters are 50% and 90% opaque, respectively.
Specifications
| Specification |
|---|
| Filter Effects Module Level 1 # FloodOpacityProperty |