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

Составьте последовательность фильтров

1. Выберите тип и добавьте строку. Новые строки начинаются с визуально нейтральных значений; в начальном примере уже есть яркость и насыщенность. Можно повторять типы и добавлять до двенадцати строк.
2. Изменяйте значения, включайте и исключайте строки, перемещайте или дублируйте их. Каждая функция получает результат предыдущей, поэтому порядок влияет на изображение.
3. Сравните результат и оригинал в одном масштабе или переключитесь с подгонки на 100% для просмотра с прокруткой. Копируется показанное объявление даже в режиме оригинала; при ошибках в активных полях результат недоступен.

Как работает последовательность

Фильтр — это последовательность обработки слева направо, а не список теней через запятую. Два размытия остаются двумя вызовами. Отключённая строка исключается без перемещения и возвращается на прежнее место при включении.

Яркость, контрастность и насыщенность в редакторе могут превышать 100%. Для оттенков серого, инверсии, непрозрачности и сепии задан диапазон 0–100%. Угол оттенка сохраняет заданные обороты: -450deg не заменяется на 270deg.

Drop-shadow следует альфа-силуэту результата предыдущих функций. Третья длина тени и параметр blur() — стандартное отклонение Гаусса в CSS-пикселях, а не радиус размытия box-shadow. Параметров inset и spread нет; дополнительные тени добавляются отдельными вызовами.

Включённая визуально нейтральная функция всё равно создаёт значение filter и может влиять на группировку, наложение и позиционирование. Очистите список или отключите все строки, чтобы получить filter: none;.

Примеры порядка и прозрачности

Пример применяет brightness(125%), blur(1.25px), тень со смещением -6px и 8px, сигмой 3px и цветом rgb(20 40 80 / 35%), затем blur(0.5px). При отключении тени оба размытия сохраняют порядок.

Для условного непрозрачного канала со значением одна четверть brightness(50%) и затем invert(100%) дают семь восьмых; в обратном порядке — три восьмых. Это пример влияния порядка, а не предсказание пикселей браузера.

Два вызова opacity(50%) могут снизить альфа-канал до одной четверти. Непрозрачная тень без смещения не обязательно нейтральна для полупрозрачного содержимого; полностью прозрачная тень не добавляет непрозрачности.

Ограничения редактора и предпросмотра

Числовой редактор поддерживает десять типов функций с px, процентами, градусами, шестизначным цветом тени и отдельной непрозрачностью. Диапазоны ограничивают интерфейс, а не весь синтаксис CSS. Импорт CSS, собственные SVG-фильтры, загрузка и экспорт изображений, удалённые изображения и анимация не поддерживаются.

Фиксированный образец иллюстративен и не является вашей фотографией или страницей. Прозрачные отверстия и полупрозрачные формы показывают работу силуэта. Другое содержимое, фон, вёрстка и браузер могут дать иной вид; это не проверка цвета, читаемости или контраста.

Подгонка масштабирует весь холст, не изменяя заданные длины CSS. Режим 100% использует масштаб CSS-координат и прокрутку, а не гарантирует соответствие физическим пикселям. Поля приблизительны, края размытия могут обрезаться, а длинная цепочка может выглядеть мелко.

Ошибочные активные значения скрывают текущий CSS и обычный предпросмотр. Отключённые строки сохраняют текст, но исключаются из CSS и проверки активных значений. Недоступность только предпросмотра не меняет допустимый CSS и его копирование.

Локальная работа без загрузки изображений

Инструмент не добавляет загрузку файлов, запросы удалённых изображений, сохранение черновиков, ссылки с настройками или телеметрию с введёнными значениями. Образец задан в коде, копирование выполняется явно. Это не гарантия удаления данных у служб сайта, расширений или в сохранённых копиях.