Filter

Backdrop Blur

Utilities for applying backdrop blur filters to an element.

Basic usage

Blurring behind an element

Use the backdrop-blur-{amount?} utilities to control an element’s backdrop blur.

backdrop-blur-sm

backdrop-blur-md

backdrop-blur-xl

<div className="**backdrop-blur-sm** bg-white/30 ...">
  <!-- ... -->
</div>
<div className="**backdrop-blur-md** bg-white/30 ...">
  <!-- ... -->
</div>
<div className="**backdrop-blur-xl** bg-white/30 ...">
  <!-- ... -->
</div>