---
url: /docs/foundations/css-classes/backdrop-blur.md
---
> 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.

```html{2,5,8,11,14,17,20}
<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>
```