ПаветтаГенератор CSS filter
Свойство filter обрабатывает картинку прямо в браузере: не нужно готовить второй файл ради чёрно-белой версии или затемнённой обложки.
Предпросмотр
Фильтры
Готовый CSS
Разобрать чужой фильтр
Что умеет filter и в каком порядке
Свойство filter обрабатывает изображение прямо в браузере: чёрно-белая версия обложки, затемнённая подложка под текстом, размытая картинка на фоне — всё это получается без второго файла. Работает не только с картинками: фильтр применяется к любому элементу вместе с его содержимым.
Функции пишутся списком, и порядок в записи — это порядок применения. Размытие до инверсии и инверсия до размытия дают разный результат. Инструмент показывает картинку с наложенными фильтрами и собирает запись в том порядке, в котором вы расставили функции.
Отдельно стоит drop-shadow: он строит тень по реальному контуру изображения, обходя прозрачные участки. Для картинки с прозрачным фоном это единственный способ получить тень по силуэту.
| Функция | Что делает | Диапазон |
|---|---|---|
| grayscale | Обесцвечивает | 0–100% |
| blur | Размывает | 0–20px |
| brightness | Яркость | 0–200% |
| contrast | Контраст | 0–200% |
| drop-shadow | Тень по контуру | x y blur цвет |
Из фотолаборатории в матрицы свёртки
Все эти операции пришли из фотолаборатории. Светофильтр на объективе убирал лишний цвет, время выдержки под увеличителем задавало яркость, а мягкорисующая насадка давала размытие. Фотограф собирал итоговый отпечаток из тех же приёмов, только руками и за часы работы.
Цифровая обработка формализовала их в матрицы свёртки: размытие, резкость и выделение краёв считаются одинаково, меняются только числа в ядре. Этот аппарат описан в работах по обработке изображений семидесятых и лежит в основе любой сегодняшней фотопрограммы.
В вебе фильтры сначала появились в SVG: модуль filter effects умел свёртки и цветовые матрицы задолго до CSS. Короткие функции вроде grayscale и blur пришли в CSS позже как удобные обёртки над теми же операциями, и через url() к ним можно подключить любой SVG-фильтр целиком. Функция url() подключает SVG-фильтр целиком, и через неё в CSS доступны цветовые матрицы и свёртки, которых нет среди коротких функций.
Как настроить фильтры и убрать кромку
Соберите нужный набор и следите за порядком. Для затемнённой подложки под белым текстом хватает brightness около 60 процентов, для деликатного размытия фона — blur в 4–8 пикселей. Обесцвечивание с возвратом цвета по наведению делается парой правил и выглядит дороже, чем стоит.
Размытие обрезается по краям элемента, поэтому у картинки появляется полупрозрачная кромка: лечится масштабированием на пару процентов или отрицательными отступами у обёртки. И держите в уме нагрузку — большое размытие на элементе во всю ширину экрана заметно проседает при прокрутке на слабых устройствах. Матовое стекло на том же механизме соберёт генератор glassmorphism. Свойство backdrop-filter применяет те же функции к тому, что видно сквозь элемент. На нём строится матовое стекло, и стоит он дороже обычного фильтра: браузер обрабатывает область под элементом на каждом кадре. Фильтр создаёт новый контекст наложения, и элементы внутри перестают выходить за его границы: у выпадающего меню внутри отфильтрованного блока это ломает позиционирование.
Проверяйте нагрузку на длинной странице. Один отфильтрованный блок незаметен, десяток размытых карточек в ленте заметно проседает при прокрутке на телефоне. Если фильтр статичен, дешевле подготовить обработанную картинку заранее и отдать её обычной ссылкой: браузеру останется только показать готовый файл, и прокрутка перестанет дёргаться даже на бюджетном телефоне.
| Применяется к | любому элементу |
| Порядок функций | порядок применения |
| Затемнение фона | brightness 60 % |
| Деликатное размытие | blur 4–8px |
| Тень по силуэту | drop-shadow |
| Родина фильтров | SVG |
| Основа вычислений | матрицы свёртки |
| Кромка при размытии | лечится масштабом |
Как пользоваться
Здесь собраны все восемь функций плюс тень по контуру, каждая на своём ползунке, с предпросмотром на вашей картинке — её можно подставить по адресу или загрузить с диска, файл при этом никуда не уходит. Порядок функций в записи имеет значение: размытие после инверсии и до неё дают разный результат, и это видно сразу. Готовое свойство копируется одной кнопкой, чужое — разбирается обратно в ползунки.
- По адресу или файлом с диска. Файл остаётся в браузере и никуда не отправляется.
- Каждая функция включается своим ползунком, отключённые в код не попадают.
- Чёрно-белое, винтаж, затемнение под текст, матовое стекло — дальше их можно доработать.
- Готовое свойство под предпросмотром. Функции идут в том же порядке, в каком применяются.
Частые вопросы
Важен ли порядок функций
Да, фильтры применяются последовательно, и результат зависит от очереди. grayscale потом brightness осветляет уже обесцвеченную картинку; brightness потом grayscale обесцвечивает уже осветлённую — тона получатся разные. Заметнее всего это с invert и hue-rotate.
Чем filter отличается от backdrop-filter
filter обрабатывает сам элемент, backdrop-filter — то, что находится ПОД ним. Матовое стекло делается именно вторым: полупрозрачный блок размывает фон за собой, оставаясь чётким сам. Если применить обычный filter, размоется и текст внутри блока.
Фильтры тормозят страницу
Размытие — самая дорогая функция: браузер пересчитывает пиксели в несколько проходов, и большая площадь с blur заметно роняет частоту кадров, особенно на телефоне. Остальные функции дешёвые. Практическое правило: анимировать можно opacity и transform, а фильтры лучше применять статично.
Как сделать чёрно-белую картинку
grayscale(1) или grayscale(100%) — это одно и то же, единица означает полное обесцвечивание. Часто вместе с ним поднимают контраст: обесцвеченная фотография выглядит вялой, и contrast(1.1) возвращает ей плотность.
Что делает drop-shadow внутри filter
Рисует тень по непрозрачным пикселям содержимого — по силуэту, со всеми вырезами. Для PNG с вырезанным фоном или для SVG-иконки это единственный способ получить тень по контуру: box-shadow обведёт квадрат вокруг картинки. У drop-shadow нет параметра растяжения.
Работают ли фильтры на видео и на фоне
На видео работают так же, как на картинке. На фоновом изображении блока — нет: filter применится ко всему элементу вместе с содержимым. Чтобы обработать только фон, его выносят на псевдоэлемент и фильтруют уже его.
Картинка загружается на сервер?
Нет. Картинка обрабатывается браузером, файл с диска на сервер не загружается.
Спросите нейросети об инструменте
Больше возможностей: Нейросеть для кода, написать, найти ошибку, объяснить.
Похожие инструменты
Эффект матового стекла на CSS: размытие фона, прозрачность, рамка и тень. С проверкой читаемости и запасным вариантом.
ОткрытьГенератор clip-pathОбрезка блока по фигуре: многоугольник с перетаскиванием точек, круг, эллипс и рамка. Скосы, шестиугольники и звёзды из пресетов.
ОткрытьКалькулятор CSS clamp()Адаптивный размер по двум точкам без медиазапросов. С графиком роста и проверкой требования доступности о масштабировании.
ОткрытьГенератор text-shadowТень текста со слоями и готовыми эффектами: обводка, неон, объём, гравировка. Предпросмотр на своём фоне и шрифте.
ОткрытьГенератор CSS GridКолонки и строки в fr, px и auto, объединение ячеек мышью и именованные области. Выдаёт готовый grid-template с областями.
ОткрытьГенератор CSS-градиентовЛинейный, радиальный и конический градиент с живым предпросмотром. Любое число цветовых точек, угол и позиции, разбор чужого кода обратно в точки.
ОткрытьЕщё генераторы
Пароли и тестовые данные, CSS-градиенты, тени и скругления, clip-path и фильтры, анимации, Flexbox и Grid — в разделе 39 генераторов.