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

Комбинируйте функции CSS-фильтров: размытие, яркость, контраст, оттенки серого, сепия, инверсия, поворот оттенка и тень на примере или своём изображении.

Пресеты

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

Размытиеpx

Яркость%

Контраст%

Оттенки серого%

Поворот оттенкаdeg

Инверсия%

Непрозрачность%

Насыщенность%

Сепия%

Отбрасываемая тень

Добавить drop-shadow()

Изображение

Своё изображение

Изображение отображается локально и никуда не загружается.

Предпросмотр

CSS-код

filter: none;

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

Применяет CSS-свойство filter к изображению в реальном времени. Сочетайте blur, brightness, contrast, grayscale, поворот оттенка, invert, opacity, насыщенность, sepia и drop-shadow, сравнивайте с оригиналом и копируйте код. Можно использовать встроенный пример или загрузить своё изображение, оно остаётся на вашем устройстве.

Как пользоваться Генератор CSS-фильтров

Выберите пресет (Black & white, Vintage, Warm, Cool, Dramatic…) или начните с None.
Двигайте ползунки для каждой функции фильтра.
При необходимости включите drop-shadow() и задайте его смещения, размытие, цвет и прозрачность.
Нажмите «Использовать своё изображение», чтобы проверить на локальном файле.
Скопируйте CSS-код.

Пример

Ввод

blur 2px, brightness 120%, hue-rotate -90°, sepia 50%, drop-shadow on (4px 4px 6px, black at 0.5)

Вывод

filter: blur(2px) brightness(120%) hue-rotate(-90deg) sepia(50%) drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));

Функции идут в фиксированном порядке, drop-shadow() всегда последняя.

Когда использовать Генератор CSS-фильтров

Подходит для эффектов наведения на изображения, единообразной стилизации фото, затемнения фонов и теней, повторяющих форму прозрачных PNG/SVG (drop-shadow). Файл изображения при этом не изменяется; для постоянной правки используйте графический редактор или инструменты изображений на сайте. Чтобы повлиять на то, что находится за элементом, а не на сам элемент, применяйте backdrop-filter (см. генератор glassmorphism).

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

Записываются только функции, отличающиеся от нейтрального значения (например, brightness опускается при 100%), в фиксированном порядке: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow. В CSS порядок важен, потому что каждая функция применяется к результату предыдущей. Если ничего не менялось, результат filter: none;. Ваше изображение показывается через локальный object URL и никуда не загружается.