CSS flood-opacity

The CSS flood-opacity property is used in SVG to define the opacity value to use across the entire filter primitive subregion.

The flood-opacity property can be used on the feFlood and feDropShadow elements in SVG.

The flood-opacity property is a presentation attribute for SVG elements. It can be used in a style sheet or as a presentation attribute.

Syntax

Where:

In other words, the value can be either a valid <number> or <percentage> value.

Basic Property Information

Example Code

CSS

Here's an example when used within the style element:

Here's an example when used with the style attribute:

As a Presentation Attribute

Here's an example when used as an SVG presentation attribute:

Working Example within an SVG Document

Here's a full working example when used within the style element:

CSS Specifications

• The flood-opacity property is defined in Filter Effects Module Level 1.
• It is also defined in Scalable Vector Graphics (SVG) 1.1 (Second Edition) (W3C Recommendation 16 August 2011).

Browser Support

Browser support for CSS properties can vary, particularly for newer or experimental features. Check current browser compatibility before using a property in production, especially when supporting older browsers.

Initial Value

CSS properties have an initial value that applies when the property has not been explicitly set. The initial value is different from the value inherited from a parent element and may vary between properties.

Inheritance

Some CSS properties inherit their computed value from their parent element by default, while others do not. The inherit, initial, unset, and revert keywords can also be used to control how a property gets its value.

Vendor Prefixes

Most modern CSS properties use the standard, unprefixed syntax. Vendor-prefixed properties such as -webkit- are mainly relevant to older browser versions or specific features and should only be used when required by your browser support targets.