Filter

Backdrop Grayscale

Utilities for applying backdrop grayscale filters to an element.

Basic usage

Making an element grayscale

Use the backdrop-grayscale and backdrop-grayscale-0 utilities to control whether an element's backdrop should be rendered as grayscale or in full color.

backdrop-grayscale-0

backdrop-grayscale

<div className="**backdrop-grayscale-0** bg-white/30 ...">
  <!-- ... -->
</div>
<div className="**backdrop-grayscale** bg-white/30 ...">
  <!-- ... -->
</div>