Filters

Backdrop Blur

Utilities for applying backdrop blur filters to an element.

Quick reference

Class	Description
backdrop-blur-none	-webkit-backdrop-filter: blur(0) backdrop-filter: blur(0)
backdrop-blur	-webkit-backdrop-filter: blur(4px) backdrop-filter: blur(4px)
backdrop-blur-s	-webkit-backdrop-filter: blur(2px) backdrop-filter: blur(2px)
backdrop-blur-m	-webkit-backdrop-filter: blur(8px) backdrop-filter: blur(8px)
backdrop-blur-l	-webkit-backdrop-filter: blur(12px) backdrop-filter: blur(12px)
backdrop-blur-xl	-webkit-backdrop-filter: blur(16px) backdrop-filter: blur(16px)
backdrop-blur-xxl	-webkit-backdrop-filter: blur(24px) backdrop-filter: blur(24px)
backdrop-blur-xxxl	-webkit-backdrop-filter: blur(40px) backdrop-filter: blur(40px)

Basic usage

Blurring behind an element

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

backdrop-blur-none

backdrop-blur-s

backdrop-blur-m

backdrop-blur-l

backdrop-blur-xl

backdrop-blur-xxl

backdrop-blur-xxxl

<div class="bg-[...] ...">
  <div class="backdrop-blur-none ..."></div>
</div>
<div class="bg-[...] ...">
  <div class="backdrop-blur-s ..."></div>
</div>
<div class="bg-[...] ...">
  <div class="backdrop-blur-m ..."></div>
</div>
<div class="bg-[...] ...">
  <div class="backdrop-blur-l ..."></div>
</div>
<div class="bg-[...] ...">
  <div class="backdrop-blur-xl ..."></div>
</div>
<div class="bg-[...] ...">
  <div class="backdrop-blur-xxl ..."></div>
</div>
<div class="bg-[...] ...">
  <div class="backdrop-blur-xxxl ..."></div>
</div>