# Backdrop Grayscale

Apply a grayscale filter to the area behind 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-g:0` | backdrop-filter | `grayscale(0%)` |
| `bf-g:10` | backdrop-filter | `grayscale(10%)` |
| `bf-g:20` | backdrop-filter | `grayscale(20%)` |
| `bf-g:30` | backdrop-filter | `grayscale(30%)` |
| `bf-g:40` | backdrop-filter | `grayscale(40%)` |
| `bf-g:50` | backdrop-filter | `grayscale(50%)` |
| `bf-g:60` | backdrop-filter | `grayscale(60%)` |
| `bf-g:70` | backdrop-filter | `grayscale(70%)` |
| `bf-g:80` | backdrop-filter | `grayscale(80%)` |
| `bf-g:90` | backdrop-filter | `grayscale(90%)` |
| `bf-g:100` | backdrop-filter | `grayscale()` |

### Media Queries

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

| Class | Properties | Value |
|-------|------------|-------|
| `bf-g:0` | backdrop-filter | `grayscale(0%)` |
| `bf-g:10` | backdrop-filter | `grayscale(10%)` |
| `bf-g:20` | backdrop-filter | `grayscale(20%)` |
| `bf-g:30` | backdrop-filter | `grayscale(30%)` |
| `bf-g:40` | backdrop-filter | `grayscale(40%)` |
| `bf-g:50` | backdrop-filter | `grayscale(50%)` |
| `bf-g:60` | backdrop-filter | `grayscale(60%)` |
| `bf-g:70` | backdrop-filter | `grayscale(70%)` |
| `bf-g:80` | backdrop-filter | `grayscale(80%)` |
| `bf-g:90` | backdrop-filter | `grayscale(90%)` |
| `bf-g:100` | backdrop-filter | `grayscale()` |

### Pseudo Classes

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

| Class | Properties | Value |
|-------|------------|-------|
| `bf-g:0` | backdrop-filter | `grayscale(0%)` |
| `bf-g:10` | backdrop-filter | `grayscale(10%)` |
| `bf-g:20` | backdrop-filter | `grayscale(20%)` |
| `bf-g:30` | backdrop-filter | `grayscale(30%)` |
| `bf-g:40` | backdrop-filter | `grayscale(40%)` |
| `bf-g:50` | backdrop-filter | `grayscale(50%)` |
| `bf-g:60` | backdrop-filter | `grayscale(60%)` |
| `bf-g:70` | backdrop-filter | `grayscale(70%)` |
| `bf-g:80` | backdrop-filter | `grayscale(80%)` |
| `bf-g:90` | backdrop-filter | `grayscale(90%)` |
| `bf-g:100` | backdrop-filter | `grayscale()` |