backdrop-filter применяет фильтр не к самому элементу, а к тому, что видно ЗА ним - к фону под блоком. Функции те же, что у filter (blur, brightness, saturate и другие), но чтобы эффект вообще стало видно, элемент или его фон должны быть хотя бы немного прозрачными - иначе фильтровать буквально нечего показать сквозь сплошной непрозрачный слой.
В этом уроке
Попробуй прямо сейчас: под карточкой "Матовое стекло" - яркий градиент, но сквозь саму карточку он виден размытым и приглушённым, а текст внутри остаётся чётким. Поменяй blur(12px) на blur(0px) - градиент под карточкой станет резким, эффект стекла исчезнет. А если заменить background карточки на сплошной непрозрачный (например white без rgba) - размытие в CSS всё ещё будет применено, но увидеть его станет невозможно: сплошной фон просто закроет собой то, что происходит позади.
Чем backdrop-filter отличается от filter
backdrop-filter принимает тот же самый список фильтр-функций, что и filter из прошлого урока - blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() - и подчиняется тем же правилам синтаксиса: функции пишутся через пробел, порядок между ними важен. Разница не в наборе функций, а в том, к чему они применяются. filter красит сам элемент и всё его содержимое как один сплющенный рисунок - если размыть filter'ом карточку с текстом, текст размоется вместе с фоном. backdrop-filter вообще не трогает элемент и его собственный контент - он фильтрует то, что нарисовано ПОД элементом: фон страницы, картинки, другие блоки, оказавшиеся ниже по стеку.
Из этого следует правило, которое легко упустить: если элемент (или его background) полностью непрозрачный, backdrop-filter физически нечего показать сквозь него. Эффект технически применяется браузером, но его никто не увидит - сплошной фон элемента закрывает собой всё, что происходит позади.
.card {
background: white;
backdrop-filter: blur(10px);
} - фон сплошной непрозрачный, эффект применён, но невидим.
.card {
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
} - 30% непрозрачности достаточно, чтобы сквозь блок читался размытый фон.
Для старых версий Safari нужен дополнительный префикс -webkit-backdrop-filter перед основным свойством - без него эффект в этом браузере просто не сработает, без ошибки в консоли, страница молча покажет сплошной блок без размытия. Современные Chrome, Firefox и Edge понимают backdrop-filter без префикса.
Матовое стекло: готовый паттерн для интерфейса
Комбинация полупрозрачного background и backdrop-filter: blur() - это и есть паттерн "матовое стекло" (glassmorphism), который видно в панелях уведомлений, всплывающих меню и карточках поверх фоновых изображений. Как и обычный filter, backdrop-filter создаёт для элемента новый containing block для потомков с position:fixed/absolute - мы проверяли этот же эффект в уроке про filter: координаты такого потомка отсчитываются от границ отфильтрованного элемента, а не от всего окна браузера.
У эффекта есть заметная цена: браузеру приходится на лету пересчитывать размытие всего, что видно под элементом, на каждом кадре - а не один раз статично, как для filter на неподвижном фоне. При скролле страницы, где под блоком постоянно меняется картинка, это ощутимо нагружает видеокарту. Один из разработчиков на Хабре жаловался именно на подтормаживание скролла при использовании backdrop-filter: blur, и в обсуждении так и не нашлось надёжного фикса, кроме как убрать эффект - подробнее о производительности фильтров поговорим в отдельном уроке курса.
Свойство появилось в вебе в 2015 году: команда WebKit представила его в блоге 10 августа 2015 года как -webkit-backdrop-filter, объяснив мотивацию прямо - дизайнеры хотели переносить в веб эффекты "матового стекла", уже привычные по iOS 7 и OS X Yosemite, но до этого свойства такой эффект приходилось имитировать заранее нарисованными картинками фона: негибко и с артефактами при любом изменении контента позади.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Ставить backdrop-filter на элемент со сплошным непрозрачным фоном | Эффект технически применяется, но его нечего показать - фон элемента просто закрывает всё позади | Сделать background элемента хотя бы частично прозрачным через rgba()/hsl() с альфа-каналом |
| Не добавлять -webkit-backdrop-filter для Safari | В старых версиях Safari эффекта не будет вообще, без ошибки в консоли | Дублировать свойство с префиксом перед основным - как в примерах этого урока |
| Путать backdrop-filter с filter, ожидая размытия самого элемента и текста внутри | Текст и контент элемента остаются полностью чёткими - размывается только то, что позади | Использовать filter, если нужно размыть сам элемент; backdrop-filter - если нужно размыть то, что за ним |
| Вешать backdrop-filter на большой часто скроллящийся блок без проверки производительности | Заметные подтормаживания скролла на слабых устройствах | Ограничивать зону действия эффекта и проверять реальную плавность скролла на разных устройствах |
Шпаргалка
| Запись | Что означает |
|---|---|
| backdrop-filter: blur(10px); | Размывает то, что видно ЗА элементом, сам элемент не трогает |
| background: rgba(255,255,255,.3); + backdrop-filter | Классический паттерн "матовое стекло" (glassmorphism) |
| Непрозрачный background у элемента | Эффект применён, но не виден - нечего показать сквозь сплошной фон |
| -webkit-backdrop-filter | Нужен доп. префикс для старых версий Safari |
| filter vs backdrop-filter | filter красит сам элемент целиком; backdrop-filter - то, что позади него |
Коротко: отвечаем на вопросы
Как размыть только фон карточки, не трогая текст внутри?
Через filter это не получится - он размывает элемент целиком, включая любой текст внутри, мы проверяли это ещё в уроке про CSS-фильтры. Правильный инструмент - backdrop-filter: blur(): он размывает только то, что просвечивает сквозь полупрозрачный фон элемента, а собственный текст и контент элемента остаются чёткими. Именно с этим вопросом сталкивался разработчик на Хабре, пытаясь размыть подложку карточки, не трогая текст, - backdrop-filter решает эту задачу напрямую.
Почему backdrop-filter может тормозить скролл страницы?
Потому что браузеру приходится пересчитывать размытие фона под элементом на каждом кадре по мере скролла, а не один раз статично, как для filter на неподвижном фоне, - это заметно нагружает видеокарту. На слабых устройствах или при частом скролле стоит ограничивать зону действия эффекта и проверять реальную плавность страницы, а не полагаться на то, что свойство всегда лёгкое.
