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

Создавайте CSS filter или backdrop-filter из визуальных элементов управления.

Размытие (px)Яркость (%)Контрастность (%)Оттенки серого (%)Сдвиг оттенка (град)Инверсия (%)Прозрачность (%)Насыщенность (%)Сепия (%)Добавить теньСдвиг тени по X (px)Сдвиг тени по Y (px)Размытие тени (px)Цвет тениПорядок функций (через запятую)Использовать backdrop-filter вместо filterПредустановкаФормат вывода

Выходные данные

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

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

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

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

FAQ

В чем разница между filter и backdrop-filter?

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

Почему порядок функций фильтра имеет значение?

CSS применяет функции фильтра слева направо, каждая операция выполняется на результате предыдущей. Применение размытия перед корректировкой контрастности может выглядеть иначе, чем корректировка контрастности в первую очередь, поэтому переупорядочение может изменить финальный вид даже с одинаковыми значениями.

Что делают предустановки ретро и чёрно-белое?

Ретро устанавливает теплую комбинацию сепии, насыщенности, контрастности, яркости и легкого сдвига оттенка; чёрно-белое устанавливает оттенки серого на 100% с небольшим повышением контрастности. Каждая предустановка переопределяет отдельные ползунки во время выбора.

Могу ли я использовать созданный CSS с Tailwind?

Да. Переключите формат вывода на "Класс Tailwind" и инструмент обернет то же самое свойство в синтаксис произвольного свойства Tailwind, например `[filter:blur(4px)_grayscale(50%)]`, чтобы вы могли вставить его прямо в атрибут `class`.

Мои данные где-то загружаются?

Нет. Фильтр создается полностью в вашем браузере из установленных вами параметров — ничего не отправляется на сервер.

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

Связанные инструменты

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

FAQ