backdrop-filter
Применяет фильтры ко всему, что находится за элементом, — эффект матового стекла.
Синтаксис
backdrop-filter: blur(10px);Значения
| Параметр | Тип | Описание |
|---|---|---|
| blur() | function | Размывает то, что позади. |
| brightness() | saturate() | function | Меняет яркость или насыщенность того, что позади. |
Примеры
Панель из матового стекла поверх фотографии:
<style>
.photo { height: 150px; background: url(/media/photo-600x200.jpg) center / cover; padding: 30px; }
.glass {
padding: 12px;
background: rgb(255 255 255 / 0.3);
backdrop-filter: blur(8px);
border-radius: 8px;
}
</style>
<div class="photo"><div class="glass">Frosted glass</div></div>Примечания
Элемент должен быть хотя бы частично прозрачным, иначе за ним ничего не видно. Поддерживается всеми актуальными браузерами; в старых панель просто останется полупрозрачной.
См. также
- filter — Графические эффекты элемента: размытие, чёрно-белый режим, яркость, тень по форме.
- ::backdrop — Слой прямо под модальным `<dialog>` или элементом в полноэкранном режиме.
- opacity — Прозрачность всего элемента вместе с содержимым.
Вопросы и ответы по теме
В учебнике
- Фильтры — Свойство filter — размытие, чёрно-белый режим, яркость, контраст и тень по контуру drop-shadow, а также backdrop-filter для эффекта матового стекла.