Фильтры в CSS
Анимации задавали линию времени. Transform сдвигал где лежат пиксели. Фильтры меняют как эти пиксели выглядят: лёгкий blur под модалкой, серая миниатюра, что на hover снова обретает цвет, фото с поднятыми brightness и contrast — всё в той же ячейке вёрстки.
Что делает filter
Свойство filter накладывает один или несколько пост-эффектов на уже отрисованный вывод элемента (обычно вместе с потомками, как одной группой). Ширина, высота и поток документа не меняются — меняется только картинка. Сброс: filter: none (начальное значение).
Несколько функций пишут в одном значении filter, через пробел — по духу как цепочка transform, но здесь инструменты визуальные, а не пространственные: filter: brightness(1.1) contrast(1.05) saturate(1.2);
Функции filter — кратко
📊 Распространённые функции CSS filter
| Функция | Типичная задача |
|---|---|
blur(radius) |
Смягчить края / эффект «матового стекла» (px и другие длины) |
brightness(%) |
Светлее или темнее (1 / 100% = без изменений) |
contrast(%) |
Усилить или сгладить тональный диапазон |
grayscale(%) |
Убрать цвет (1 = полностью серый) |
saturate(%) |
Насыщеннее или бледнее |
hue-rotate(angle) |
Сдвиг оттенков по цветовому кругу |
opacity(%) |
Ослабить результат фильтра (родственно, но не то же, что свойство opacity) |
sepia(%) / invert(%) |
Тёплый «винтаж» / инверсия тонов |
drop-shadow(…) |
Тень по альфа-контуру (иконки, прозрачные PNG) |
none |
Снять фильтры |
Проценты и «голые» числа часто эквивалентны (grayscale(1) ≈ grayscale(100%)). В проекте выберите один стиль и придерживайтесь его.
Серые карточки, оживающие на hover
Классика галереи: по умолчанию без цвета, при наведении — полный. Короткий transition на filter делает возврат цвета осмысленным — движение из прошлых уроков, «вид» из этого.
.thumb {
filter: grayscale(1);
transition: filter 0.25s ease;
}
.thumb:hover,
.thumb:focus-visible {
filter: grayscale(0);
}
grayscale(0) — полный цвет. Transition на filter оставляйте для лёгких смен; тяжёлый blur на больших фото в анимации дорог по GPU.
Мягкий blur для акцента
blur() размывает элемент. Умеренный радиус — на оверлее или фоновом слое, не на всём body, чтобы текст оставался читаемым.
.modal-scrub {
filter: blur(6px);
transform: scale(1.02);
}
.modal-dialog {
/* keep the dialog itself sharp — no filter here */
filter: none;
}
Размытие крупного предка тянет за собой и его текст. Когда передний план должен быть резким, размывайте отдельный фоновый слой (или используйте backdrop-filter ниже).
Brightness и contrast для фото
Товарные и hero-кадры часто просят лёгкой «подкраски» без графического редактора.
.hero-photo {
display: block;
width: 100%;
height: auto;
filter: brightness(1.08) contrast(1.06);
}
.hero-photo.is-muted {
filter: brightness(0.85) contrast(0.95) saturate(0.8);
}
Значения чуть выше 1 осветляют или усиливают контраст; ниже 1 — приглушают. Малые шаги читаются как полировка; резкие скачки выглядят неестественно.
Несколько фильтров в одном правиле
В одной декларации можно совместить тон, цвет и мягкость. В сложных стеках порядок иногда важен — пишите задуманное слева направо и проверяйте в браузере.
.sticker {
filter: saturate(1.35) hue-rotate(12deg) blur(0.3px);
}
.sticker.is-print {
filter: grayscale(0.15) contrast(1.1);
}
Начните с одной–двух функций. Добавляйте остальное только по необходимости дизайна — каждый лишний filter на большой площади — больше работы GPU.
drop-shadow() и box-shadow
box-shadow обходит border box. drop-shadow() следует альфа-силуэту — удобно для PNG с прозрачностью и иконок, где тень должна облегать глиф, а не прямоугольник.
.icon-glow {
width: 2.5rem;
height: 2.5rem;
filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.35));
}
.icon-glow:hover {
filter: drop-shadow(0 6px 10px rgba(37, 99, 235, 0.45));
}
У drop-shadow() нет inset, как у box-shadow. Для «вдавленной» карточки оставайтесь на box-shadow из урока про Effects.
Backdrop-filter — размыть то, что сзади
backdrop-filter влияет на содержимое, просвечивающее через полупрозрачный элемент (матовое стекло). Нужен просвечивающий фон — иначе нечего сэмплировать.
Идея: липкий header над шумным hero — background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px);. В современных браузерах поддержка широкая; если blur недоступен, держите запасной непрозрачный фон.
opacity в filter и свойство opacity
filter: opacity(0.5) ослабляет уже отфильтрованную картинку. Свойство opacity затемняет элемент целиком и часто меняет группировку для stacking и композитинга детей. Когда «весь блок с детьми должен исчезать вместе», обычно яснее отдельное opacity. opacity() в filter уместна, когда она часть стека вместе с blur или цветовой подкраской.
Попробуйте сами
- На изображении карточки задайте
filter: grayscale(1); на:hoverвернитеgrayscale(0)и добавьтеtransition: filter 0.2s ease. - Размойте фоновый слой
blur(8px); текст на переднем плане без filter. - Подкрутите фото
brightness(1.1) contrast(1.05); затем плавно верните оба значения к1, пока не станет естественно. - На стикер —
saturate(1.4) hue-rotate(20deg); уберите одну функцию и сравните. - Прозрачной PNG-иконке дайте
drop-shadow(...); сравните сbox-shadowна квадратной box. - По желанию: полоска «стекла» с полупрозрачным
backgroundиbackdrop-filter: blur(12px).
Частые ошибки
- Сильный
blur()на огромном фрагменте страницы с читаемым текстом - Ожидать
insetуdrop-shadow(), как уbox-shadow filter: opacity(), когда проще и понятнее свойствоopacityна элементе- Анимировать тяжёлые filter на больших картинках на каждом кадре скролла без проверки производительности
backdrop-filterна полностью непрозрачном фоне — сзади ничего не видно, «матовости» не будет
Итог
filterменяет вид отрисованных пикселей; поток вёрстки на месте- В одном значении можно связать blur, brightness, contrast, grayscale, saturate и др.
- Для теней по альфа-форме —
drop-shadow(); для «подъёма» box —box-shadow backdrop-filterматовит то, что видно сквозь полупрозрачный слой- Здесь заканчивается Effects & Motion; дальше Modern Toolkit — с CSS Variables
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху