Как с помощью CSS реализовать эффект «замороженного стекла» (Frosted Glass) для модального окна на сайте?

Эффект «замороженного стекла» (Frosted Glass) — популярный UI-приём, создающий иллюзию матового стекла поверх контента. Он активно используется в дизайне macOS, iOS и современных веб-интерфейсах. Реализуется преимущественно через CSS-свойство `backdrop-filter`.

## Основной метод: backdrop-filter

Главное свойство для создания эффекта — `backdrop-filter: blur()`. Оно размывает всё, что находится позади элемента.

css
.modal-overlay {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
z-index: 1000;
}

.modal {
position: relative;
width: 480px;
max-width: 90vw;
padding: 40px;
border-radius: 16px;
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);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
color: #fff;
}

## Ключевые свойства и их роль

— **`backdrop-filter: blur(12px)`** — размывает фоновое содержимое. Значение 8–16px даёт оптимальный эффект.
— **`-webkit-backdrop-filter`** — обязательный префикс для Safari и старых браузеров на WebKit.
— **`background: rgba(255, 255, 255, 0.15)`** — полупрозрачный белый фон создаёт «молочный» оттенок стекла.
— **`saturate(180%)`** — усиливает насыщенность цветов за стеклом, делая эффект более живым.
— **`border: 1px solid rgba(255, 255, 255, 0.3)`** — тонкая светлая рамка имитирует блик на стекле.
— **`box-shadow`** — добавляет глубину и отрыв от фона.

## Тёмный вариант Frosted Glass

Для тёмных интерфейсов используйте тёмную полупрозрачную подложку:

css
.modal-dark {
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(16px) brightness(0.8);
-webkit-backdrop-filter: blur(16px) brightness(0.8);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #f0f0f0;
}

## Анимация появления модального окна

css
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}

.modal {
animation: fadeInScale 0.25s ease-out;
}

## Поддержка браузеров и фолбэк

`backdrop-filter` поддерживается во всех современных браузерах, кроме старых версий Firefox (до 103). Для безопасного фолбэка используйте:

css
@supports not (backdrop-filter: blur(1px)) {
.modal {
background: rgba(30, 30, 30, 0.85);
}
}

## Важные нюансы

1. **Родительский элемент** не должен иметь `overflow: hidden` — это блокирует `backdrop-filter`.
2. **Фон страницы** должен быть достаточно насыщенным (фото, градиент), иначе эффект незаметен.
3. **Производительность**: большие значения blur нагружают GPU, особенно на мобильных устройствах — используйте значения до 20px.
4. **z-index**: модальное окно должно быть выше фонового контента, но сам `backdrop-filter` работает только с контентом ниже по стеку.

Следуя этим принципам, вы получите профессиональный эффект замороженного стекла, совместимый с современными браузерами.