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

Q: Действуют ли фильтры для SVG?

Да, CSS `filter` применяется к элементам SVG так же, как и к любым другим элементам DOM. У SVG также существует собственная более сложная система элементов ` `, которая более мощна, но значительно более подробна по структуре.

Шаг 1 / 2

Свойство CSS filter применяет эффекты обработки изображений, такие как размытие, яркость, контраст и насыщенность, к любому элементу, а не только к картинкам. Ошибки чаще всего возникают при соединении нескольких фильтров и выборе единиц. Этот генератор собирает объявление filter для пяти самых распространенных функций: размытия, яркости, контраста, оттенков серого и насыщенности. Введите значения и скопируйте полученный CSS.

Как построить цепочку фильтров

1

Введите значения

Размытие в пикселях; яркость, контраст, оттенки серого и насыщенность в процентах.
2

Поймите шкалу

Яркость и контраст на 100% означают без изменений; на 0% элемент становится черным или серым. Оттенки серого идут от 0% (полный цвет) до 100% (полностью обесцвечено); насыщенность на 100% оставляет цвета как есть.
3

Сгенерируйте CSS

Нажмите кнопку, и инструмент выдаст объединенное правило `filter` со всеми пятью функциями.
4

Скопируйте правило

Скопируйте результат и вставьте его в таблицу стилей.
5

Проверьте порядок

Функции применяются слева направо. Если эффект отличается от ожидаемого, скорректируйте значения.

Функции фильтра

Функция	Единица измерения	Эффект
`blur()`	px	Гауссово размытие. 0, без размытия
`brightness()`	% или десятичная дробь	100 % = без изменений, 0 % = чёрный, 200 % = вдвое ярче
`contrast()`	% или десятичная дробь	100 % = без изменений, 0 % = серый, 200 % = вдвое сильнее
`saturate()`	% или десятичная дробь	100 % = без изменений, 0 % = оттенки серого
`grayscale()`	% или десятичная дробь	0 % = без изменений, 100 % = полная потеря насыщенности
`sepia()`	% или десятичная дробь	0 % = без изменений, 100 % = полная сепия
`hue-rotate()`	deg	0deg = без изменений. Поворачивает цветовой круг
`invert()`	% или десятичная дробь	0 % = без изменений, 100 % = полная инверсия
`opacity()`	% или десятичная дробь	То же, что свойство `opacity`
`drop-shadow()`	x y размытие цвет	Как `box-shadow`, но учитывает прозрачность и clip-path

Порядок применения важен

filter: brightness(0.5) saturate(2) сначала применяет яркость, затем насыщенность, два фильтра накладываются друг на друга.

filter: saturate(2) brightness(0.5) сначала применяет насыщенность. Поскольку изображение ярче, прежде чем его затемнят, насыщенность цвета получается более выраженной.

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

Типичные рецепты

/* Выцветшее фото */
filter: contrast(0.9) saturate(0.85) brightness(1.05);

/* Винтаж / выцветание */
filter: sepia(0.3) contrast(1.1) brightness(0.95);

/* Приближение к дуотону */
filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(1.5);

/* Затемнение hero-изображения */
filter: brightness(0.6);

/* Отключённое состояние */
filter: grayscale(1) opacity(0.6);

/* Матовое стекло поверх */
filter: blur(12px) saturate(1.3);

backdrop-filter для эффекта матового стекла

filter применяется к самому элементу; backdrop-filter, к тому, что находится позади полупрозрачного элемента, создавая эффект матового стекла, который популяризировала iOS.

.modal-backdrop {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(1.2);
}

Поддержка: все современные браузеры; Firefox наконец поддерживает его без флага начиная с версии 103.

Замечания о производительности

blur(), самый ресурсоёмкий фильтр, потому что требует свёртки каждого пикселя с ядром. Размытие в 30px на hero-изображении формата 4K заметно роняет частоту кадров.
grayscale, sepia, brightness и подобные, это попиксельные преобразования цвета, они дешёвые.
В современных браузерах фильтры ускоряются на GPU, но анимация blur() всё ещё подтормаживает на слабых устройствах.
Перед анимацией лучше указать will-change: filter.

`filter: drop-shadow()` против `box-shadow`

box-shadow следует за бордер-боксом элемента (учитывает border-radius).
filter: drop-shadow() следует за непрозрачными пикселями элемента, то есть повторяет формы clip-path, прозрачность PNG и контуры SVG.

Для теней на обрезанных или прозрачных изображениях используйте drop-shadow; для обычных карточек и блоков box-shadow работает быстрее.

Часто задаваемые вопросы

Да, фильтр применяется к элементу и всем его потомкам как к единой группе. Если вы фильтруете родителя, дочерние элементы тоже попадают под фильтр. Чтобы отфильтровать только фон родителя, поместите содержимое в отдельный контекст наложения или используйте backdrop-filter.

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

Да, все функции фильтров поддаются анимации. Следите за производительностью размытия на мобильных устройствах: анимация радиуса размытия заметно затратна. grayscale, sepia и brightness анимируются дёшево.

Да, CSS filter применяется к элементам SVG так же, как и к любым другим элементам DOM. У SVG также существует собственная более сложная система элементов <filter>, которая более мощна, но значительно более подробна по структуре.

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

Как построить цепочку фильтров

Введите значения

Поймите шкалу

Сгенерируйте CSS

Скопируйте правило

Проверьте порядок

Функции фильтра

Порядок применения важен

Типичные рецепты

backdrop-filter для эффекта матового стекла

Замечания о производительности

filter: drop-shadow() против box-shadow

Часто задаваемые вопросы

Сопутствующие инструменты

Справочная таблица ASCII

Справочник сочетаний клавиш

Справочник символов HTML

Счетчик FPS

Генератор цветовой палитры

Генератор случайных букв

`filter: drop-shadow()` против `box-shadow`