CSS flood-opacity Property - Playground Example

<!DOCTYPE html><html><head><style type="text/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);
}
</style></head><body><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></body></html>