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

Регулируйте эффекты размытия и яркости с помощью ползунков и генерируйте CSS-код фильтра с предпросмотром

История обновленийДобавлен генератор CSS-фильтров, создавайте эффекты размытия и яркостиПросмотр обновлений

Возможности

9 типов эффектов с помощью ползунков

Предпросмотр и CSS-код изменяются одновременно при каждом движении

Попробуйте со своим изображением

Загрузите изображение и проверьте эффект в браузере

Исходное изображение только во время нажатия

Сравните изображение до и после применения эффекта на месте

Точная настройка на основе 8 примеров

Начните с готовых примеров (сепия, винтаж и т.д.) и произведите точную настройку

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

Выберите изображение

Нажмите «Выберите свое изображение» и укажите файл. Если не выбрать, можно попробовать встроенное примерное изображение

Отрегулируйте эффект

Выберите похожий пример или регулируйте интенсивность эффекта каждым ползунком

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

Нажмите кнопку «Сравнить с исходным изображением», и изображение без эффекта будет показано только во время нажатия

Скопируйте код

Нажмите кнопку «Копировать» и вставьте одну строку filter в свой CSS

Примеры использования

Читаемость текста на фоне фотографии

Слегка размойте фоновую фотографию, чтобы сделать заголовок более читаемым

Унификация цветового тона фотографий

Сделайте фотографии команды или галереи черно-белыми или в стиле сепии для единого вида

Определение значений для собственных фотографий

Примените эффекты к своим фотографиям и определите оптимальные значения для приглушенного или винтажного вида

Корректировка изображений для темного режима

Определите значения яркости и контраста, чтобы изображение не было слишком ярким на темном фоне

Основные сведения

Функции filter и единицы измерения

CSS-свойство filter применяет эффекты к изображениям и элементам. Функции, такие как blur и sepia, перечисляются через пробел.

px (пиксели)：Функция blur указывает радиус размытия в пикселях. Например, 4px означает, что цвета смешиваются в радиусе 4 пикселей.
% (проценты)：Функции brightness и sepia указывают интенсивность эффекта в процентах. Для brightness 100% — исходная яркость, 120% — на 20% ярче.
deg (градусы)：Функция hue-rotate указывает угол поворота цвета на цветовом круге в градусах. Например, 180deg перемещает цвет на противоположную сторону спектра.

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

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

Разница между filter и backdrop-filter

filter и backdrop-filter используют одинаковые функции, но применяются к разным элементам.

filter：filter применяет эффект к самому элементу (изображение, текст и т.д.).
backdrop-filter：backdrop-filter применяет эффект к содержимому позади элемента и используется для эффекта матового стекла.