Как с помощью CSS реализовать эффект «стеклянного» фона (Glassmorphism) с использованием backdrop-filter?

Glassmorphism — это популярный UI-тренд, создающий иллюзию матового стекла: элемент как бы «просвечивает» сквозь себя фон, при этом слегка размывая его. Реализуется эффект преимущественно через CSS-свойство `backdrop-filter`.

## Базовый пример кода

css
.glass-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
padding: 24px;
}

## Разбор ключевых свойств

**`backdrop-filter: blur(12px)`** — главный инструмент эффекта. Размывает всё, что находится позади элемента. Значение 8–16px даёт наиболее реалистичный результат.

**`background: rgba(255, 255, 255, 0.15)`** — полупрозрачный белый фон. Прозрачность 10–25% создаёт ощущение тонкого стекла. Для тёмной темы используйте `rgba(0, 0, 0, 0.2)`.

**`saturate(180%)`** — увеличивает насыщенность размытого фона, делая эффект более живым и ярким.

**`border: 1px solid rgba(255, 255, 255, 0.3)`** — тонкая полупрозрачная рамка имитирует блик на грани стекла.

**`box-shadow`** — мягкая тень усиливает ощущение глубины и отрыва карточки от фона.

## Необходимые условия для работы эффекта

1. **Фон должен быть видимым.** Элемент с `backdrop-filter` должен находиться поверх яркого или градиентного фона — иначе эффект незаметен.
2. **Прозрачность обязательна.** Если `background` непрозрачный, `backdrop-filter` не даст визуального результата.
3. **Вендорный префикс `-webkit-`** нужен для Safari и старых версий Chrome.

## Пример полной разметки

html

css
.scene {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
}

## Совместимость и fallback

`backdrop-filter` поддерживается в Chrome 76+, Safari 9+, Edge 79+. Firefox до версии 103 требовал включения флага. Для старых браузеров добавьте fallback:

css
@supports not (backdrop-filter: blur(1px)) {
.glass-card {
background: rgba(255, 255, 255, 0.6);
}
}

## Советы по производительности

— Не используйте `backdrop-filter` на большом количестве одновременно анимируемых элементов — это нагружает GPU.
— Добавьте `will-change: transform` только при необходимости анимации.
— На мобильных устройствах снизьте значение blur до 6–8px для плавности.