CSS flood-opacity Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The flood-opacity property controls the transparency of the color produced by an SVG flood filter primitive (the paint that a flood produces) before that paint is composited into the rest of the filter chain. It governs how much of the flood color contributes to the filter output, effectively determining the strength of a uniform color fill used inside filter effects. Because it applies to the flood source itself, it does not change the opacity of the host element or other filter sources — only the generated flood paint.

In practice flood-opacity is used together with the flood color to shape the visual effect: you typically choose a hue with the flood color and then use flood-color to pick the tint and flood-opacity to dial how strongly that tint shows through. The property’s effect is applied during the filter primitive processing and is combined by compositing or blending primitives (for example when you combine the flood with an existing image using feComposite or feBlend). This behavior contrasts with the element-wide opacity property, which alters the transparency of the entire rendered element and its children rather than just a single filter source.

Because flood-opacity affects only the filter’s generated paint, it’s especially useful for subtle, localized adjustments: adding a soft colored wash behind a shape, tinting only a shadow or glow, or creating layered color effects by chaining multiple filter primitives and controlling each source’s contribution. It is animatable, so you can animate the apparent strength of a tint or glow over time without changing the underlying color, and it interacts with other filter-level settings (such as color interpolation and subsequent compositing modes) in predictable, composited order.

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]
Animatable: by computed value
JavaScript syntax: object.style.floodOpacity

Syntax

flood-opacity: <number>;

Values

<number>
A number between 0 and 1.
- 0 means fully transparent.
- 1 means fully opaque.
- Values like 0.5 will make the flood color semi-transparent.

Example

HTML

<div class="demo">

  <svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden;">

    <filter id="floodFilterLow" x="0" y="0" width="100%" height="100%">

      <feFlood flood-color="tomato" flood-opacity="0.2" result="flood"/>

      <feComposite in="flood" in2="SourceGraphic" operator="in" result="overlay"/>

      <feMerge>

        <feMergeNode in="overlay"/>

        <feMergeNode in="SourceGraphic"/>

      </feMerge>

    </filter>



    <filter id="floodFilterHigh" x="0" y="0" width="100%" height="100%">

      <feFlood flood-color="tomato" flood-opacity="0.8" result="flood"/>

      <feComposite in="flood" in2="SourceGraphic" operator="in" result="overlay"/>

      <feMerge>

        <feMergeNode in="overlay"/>

        <feMergeNode in="SourceGraphic"/>

      </feMerge>

    </filter>

  </svg>



  <div class="card low">

    <h3>flood-opacity: 0.2</h3>

    <p>Shows a subtle colored overlay using feFlood.</p>

  </div>



  <div class="card high">

    <h3>flood-opacity: 0.8</h3>

    <p>Shows a stronger colored overlay using feFlood.</p>

  </div>

</div>

CSS

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #fafafa;
  padding: 40px;
  display: flex;
  justify-content: center;
}

.demo {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.card {
  width: 220px;
  height: 140px;
  border-radius: 12px;
  padding: 16px;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  background: linear-gradient(135deg, #4a90e2, #50e3c2);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.card h3 {
  margin: 0 0 6px 0;
  font-size: 16px;
}

.card p {
  margin: 0;
  font-size: 13px;
  opacity: 0.95;
}

/* Apply the SVG filters that use feFlood + flood-opacity */
.card.low {
  filter: url(#floodFilterLow);
}

.card.high {
  filter: url(#floodFilterHigh);
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS flood-opacity property. Hover over a browser icon to see the version that first introduced support for this CSS property.