# Backdrop Blur

Set the backdrop blur filter for an element.

**Newly available.** This feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Chrome 76 · Edge 79 · Firefox 103 · Safari 18

| Class | Properties | Value |
|-------|------------|-------|
| `bf-b:none` | backdrop-filter | `blur()` |
| `bf-b:xs` | backdrop-filter | `blur(4px)` |
| `bf-b:sm` | backdrop-filter | `blur(8px)` |
| `bf-b:md` | backdrop-filter | `blur(16px)` |
| `bf-b:lg` | backdrop-filter | `blur(32px)` |
| `bf-b:xl` | backdrop-filter | `blur(64px)` |

### Media Queries

Prefix a class with a breakpoint to apply it from that width up.

| Class | Properties | Value |
|-------|------------|-------|
| `bf-b:none` | backdrop-filter | `blur()` |
| `bf-b:xs` | backdrop-filter | `blur(4px)` |
| `bf-b:sm` | backdrop-filter | `blur(8px)` |
| `bf-b:md` | backdrop-filter | `blur(16px)` |
| `bf-b:lg` | backdrop-filter | `blur(32px)` |
| `bf-b:xl` | backdrop-filter | `blur(64px)` |

### Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

| Class | Properties | Value |
|-------|------------|-------|
| `bf-b:none` | backdrop-filter | `blur()` |
| `bf-b:xs` | backdrop-filter | `blur(4px)` |
| `bf-b:sm` | backdrop-filter | `blur(8px)` |
| `bf-b:md` | backdrop-filter | `blur(16px)` |
| `bf-b:lg` | backdrop-filter | `blur(32px)` |
| `bf-b:xl` | backdrop-filter | `blur(64px)` |