Filter

Backdrop Opacity

Utilities for applying backdrop opacity filters to an element.

Basic usage

Controlling opacity of backdrop filters

Use the backdrop-opacity-{amount} utilities to control the opacity of other backdrop filters applied to an element.

backdrop-opacity-10

backdrop-opacity-60

backdrop-opacity-95

<div className="**backdrop-opacity-10** backdrop-invert bg-white/30 ...">
  <!-- ... -->
</div>
<div className="**backdrop-opacity-60** backdrop-invert bg-white/30 ...">
  <!-- ... -->
</div>
<div className="**backdrop-opacity-95** backdrop-invert bg-white/30 ...">
  <!-- ... -->
</div>