Генератор CSS-фильтров

Как пользоваться

1. Возьмите образец, похожий на вашу задачу, или бросьте свой файл прямо на картинку. На пейзаже, коже и скриншоте интерфейса одни и те же значения выглядят по-разному.

2. Крутите ползунки в левом столбце и смотрите направо: картинка и строка filter держатся в кадре, пока вы прокручиваете настройки. Начните с контраста и насыщенности — они меняют картинку сильнее всего. Размытие ставьте последним: под ним не видно, что делают остальные.

3. Включите шторку, когда кажется, что «уже хорошо». Половина набора обычно оказывается лишней, и видно это только рядом с исходником.

4. Переставьте фильтры в строке, если результат не сходится: браузер применяет их слева направо, и blur(4px) grayscale(1) не равно grayscale(1) blur(4px).

5. Прозрачность и drop-shadow проверяйте на шахматке. На белом фоне полупрозрачный кадр выглядит просто светлее, а тень по контуру — просто размытой.

6. Скопируйте код кнопкой рядом со строкой. Ссылка со всеми значениями — кнопкой «Скопировать ссылку», а готовая картинка файлом собирается ниже, в разделе «Картинка файлом».

Формула и что в неё входит

• blur — размытие по Гауссу, радиус в пикселях; нейтральное значение — 0. Дробные значения законны: 0.5px — рабочая величина
• brightness — яркость; 100 % — как есть, 0 % — чёрный кадр, больше 100 % — засветка
• contrast — контраст; 0 % сводит всё в серый, больше 100 % разводит светлое и тёмное
• drop-shadow — тень по контуру непрозрачных пикселей: сдвиг по X и Y, радиус размытия, цвет. Радиус растушёвки, в отличие от box-shadow, вдвое меньше того же числа
• grayscale, sepia — обесцвечивание и тонирование; 0 % — не трогать, 100 % — полностью
• hue-rotate — поворот цветового круга в градусах; 0deg и 360deg — одно и то же
• saturate — насыщенность; 0 % даёт то же, что grayscale(100 %)
• opacity — прозрачность самого изображения, не фона под ним

Разбор примера: почему drop-shadow ставят последним

Исходные данные — те же, что стоят в полях по умолчанию: их можно пересчитать в уме и убедиться, что инструмент не врёт.

• Размытие 2 px
• Чёрно-белое 100 %
• Тень по контуру: 2 px вправо, 4 px вниз, радиус 6 px

1. Яркость, контраст и насыщенность остались на 100 %, оттенок на 0deg — это нейтральные значения, они ничего не меняют и в строку не попадают.

2. Сдвинуты два фильтра плюс тень, они и составят правило: blur(2px) grayscale(100%) drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.45)).

3. Тень идёт последней не для красоты. drop-shadow строит силуэт по тому, что осталось от картинки после предыдущих фильтров. Поставьте его первым — тень ляжет по резкому контуру, а сама картинка окажется размытой: силуэт и предмет разойдутся.

filter: blur(2px) grayscale(100%) drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.45));

Частые вопросы

• Куда уходит моя картинка?

  Никуда. Файл читается функцией FileReader прямо в браузере и превращается в строку data:, которую видит только эта вкладка. Скачивание тоже собирается на месте: браузер рисует картинку в canvas с тем же ctx.filter и отдаёт файл ссылкой из памяти. Сетевых запросов у страницы после загрузки нет вовсе.

• Чем drop-shadow отличается от box-shadow?

  drop-shadow повторяет контур непрозрачных пикселей: у PNG с вырезанным предметом и у SVG тень получится по силуэту. box-shadow всегда рисует прямоугольник блока со скруглениями. Ещё расходится растушёвка: в box-shadow радиус размытия примерно вдвое шире, чем то же число в drop-shadow, поэтому переносить значения между ними один в один нельзя.

• Как перекрасить чёрную иконку в фирменный цвет одним CSS?

  Цепочкой invert → sepia → saturate → hue-rotate → brightness → contrast. Каждый фильтр по отдельности такого не умеет, а вместе они переводят чёрный пиксель почти в любой цвет. Аналитически цепочка не обращается, поэтому значения подбираются численно — это и делает вкладка «Перекрасить чёрную иконку». Промах показан в тысячных OKLab: ниже единицы разницу не видно даже вплотную. Приём работает с одноцветной графикой; цветную картинку он сначала гасит brightness(0) и красит целиком.

• Почему filter ломает position: fixed внутри блока?

  Потому что любое значение filter, кроме none, делает элемент содержащим блоком для потомков с position: fixed. Такой потомок начинает позиционироваться относительно отфильтрованного предка, а не окна. То же самое делают transform и will-change.

• Чем filter отличается от backdrop-filter?

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

• Почему в Tailwind порядок фильтров не такой, как я поставил?

  Tailwind собирает фильтры не строкой, а набором CSS-переменных, которые подставляются в свойство filter в своём, зафиксированном порядке. Классы можно переставлять как угодно — на результат это не повлияет. Если порядок важен, берите вывод в обычном CSS или пишите весь filter одним произвольным значением.

• Фильтры тормозят страницу?

  Размытие — самый дорогой из них: браузер пересчитывает всю площадь элемента. Один статичный blur обычно незаметен, blur на большом блоке в анимации — заметен почти всегда. backdrop-filter дороже обычного filter, потому что браузер сначала собирает то, что позади. Остальные фильтры дешевле, но каждый добавляет отдельный проход отрисовки.