Генератор CSS filter
Свойство filter обрабатывает картинку прямо в браузере: не нужно готовить второй файл ради чёрно-белой версии или затемнённой обложки. Здесь собраны все восемь функций плюс тень по контуру, каждая на своём ползунке, с предпросмотром на вашей картинке — её можно подставить по адресу или загрузить с диска, файл при этом никуда не уходит. Порядок функций в записи имеет значение: размытие после инверсии и до неё дают разный результат, и это видно сразу. Готовое свойство копируется одной кнопкой, чужое — разбирается обратно в ползунки.
Предпросмотр
Фильтры
Готовый CSS
Разобрать чужой фильтр
Как пользоваться
- По адресу или файлом с диска. Файл остаётся в браузере и никуда не отправляется.
- Каждая функция включается своим ползунком, отключённые в код не попадают.
- Чёрно-белое, винтаж, затемнение под текст, матовое стекло — дальше их можно доработать.
- Готовое свойство под предпросмотром. Функции идут в том же порядке, в каком применяются.
Частые вопросы
Важен ли порядок функций
Да, фильтры применяются последовательно, и результат зависит от очереди. 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 применится ко всему элементу вместе с содержимым. Чтобы обработать только фон, его выносят на псевдоэлемент и фильтруют уже его.
Данные куда-то отправляются
Нет. Картинка обрабатывается браузером, файл с диска на сервер не загружается.
Похожие инструменты
Список в строку с разделителем и обратно. Переносы ↔ запятые/пробелы.
ОткрытьРазбить текст на частиДелит длинный текст на куски нужной длины: Telegram 4096, подпись 1024, ВК 4000, description 160, SMS 70. Не рвёт слова и предложения.
ОткрытьИзменить размер фотоПиксели вручную или готовый пресет: обложка ВК, превью YouTube, аватар, фото 3×4, печать 10×15. Пакетно, с обрезкой или полями.
ОткрытьТипографорКавычки-ёлочки «», дефис → тире, неразрывные пробелы после предлогов, чистка двойных пробелов. Аккуратная типографика для сайта.
ОткрытьГенератор sitemap.xmlСоберёт ссылки прямо с вашего сайта по адресу или сделает карту из готового списка URL. lastmod, changefreq, priority.
ОткрытьОбрезать строкиУдалить N символов с краёв, текст до/после символа, убрать приставку или окончание.
ОткрытьЕщё инструменты для SEO и маркетинга
Кластеризатор запросов, генераторы sitemap и robots.txt, минус-слова, разметка Schema.org и калькуляторы — в разделе инструментов.