Чем отличаются CSS filters и backdrop-filter?

Question

Accepted Answer

## Разница объекта

- **`filter`** — обрабатывает **сам элемент** (и его содержимое как растр): blur, brightness, grayscale…
- **`backdrop-filter`** — размывает/тонирует то, что **позади** элемента (через полупрозрачный фон), классика «матового стекла».

```css
.avatar { filter: grayscale(0.2) contrast(1.05); }

.glass {
  background: rgb(255 255 255 / 0.55);
  backdrop-filter: blur(12px);
}
```

Оба часто создают stacking context / влияют на композитинг и perf. Нужна полупрозрачность фона, иначе backdrop не виден. Учитывайте fallback без поддержки.

## Итог

`filter` — эффект на элемент; `backdrop-filter` — эффект на фон позади него.