backdrop-filter: фильтр фона

Фильтрует всё, что находится ПОД элементом: стеклянные панели.

Уровень: средний 10 разделов 15 минут

1. Что это и зачем

Фильтрует всё, что находится ПОД элементом: стеклянные панели.

Цвет в CSS задаётся в цветовых моделях: hex, rgb(a), hsl(a) и их нотациях, включая современные oklch. Фон управляется свойством background с десятком подсвойств — от цвета до градиентов и повторения картинки.

{title} — это про контраст, а не про «красоту»: сначала читаемость, потом настроение.

2. Синтаксис и пример

.panel { backdrop-filter: blur(8px); }

Запись выше — базовый вариант использования. Обратите внимание, как backdrop-filter: фильтр фона вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

Градиенты — это фоновые изображения, сгенерированные браузером; их можно накладывать и комбинировать с картинками. Прозрачность достигается альфа-каналом, а не «лёгким» оттенком.

В реальной разметке backdrop-filter: фильтр фона встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

{title} — это про контраст, а не про «красоту»: сначала читаемость, потом настроение.

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

Современная модель цвета (hsl, oklch, color()) поддерживается везде в 2020-х. Старые hex-значения тоже всегда работают, поэтому миграция безопасна.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

blur за элементом создаёт «матовое стекло».

Поддержка обширна, но расход ресурсов заметен.

7. Практическое задание

Сделайте стеклянную панель поверх фото.

Попробуйте выполнить задание прямо в песочнице ниже — измените код из примера и оцените результат, а затем проверьте его надёжность в DevTools.

.panel { backdrop-filter: blur(8px); }

8. Как применять в проектах

Палитра заводится в переменные :root и используется во всём интерфейсе; тёмная тема меняет переменные, а не отдельные страницы.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

цвета вынесены в переменные;
контраст текста и фона ≥ 4.5:1 для текста;
состояния (hover/active) различимы по цвету И форме;
градиенты не конфликтуют с тёмной темой;
прозрачность не «серотит» текст;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам