Генератор CSS-фильтров онлайн — Обработка фото в браузере

Загрузить фото

Настройки

Пресеты

Яркость100%

Контраст100%

Размытие0px

Ч/Б0%

Сепия0%

Оттенок0deg

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

CSS код (кликните для копирования)

filter: none;

Свойство filter в CSS3 — это мощный инструмент, позволяющий применять графические эффекты к изображениям, фонам и границам прямо в браузере. Раньше для этого требовался Photoshop, но теперь вы можете обесцветить фото, добавить размытие или изменить контрастность с помощью одной строчки кода.

Наш онлайн-генератор помогает визуально подобрать идеальные параметры фильтров. Вам не нужно писать код наугад — просто двигайте ползунки и смотрите результат в реальном времени.

Как работает инструмент?

Загрузка: Нажмите кнопку «Загрузить фото» или используйте изображение по умолчанию. Обработка происходит мгновенно в вашем браузере — файлы не отправляются на сервер.
Настройка: Используйте панель справа для регулировки параметров. Вы можете комбинировать несколько эффектов (например, сделать фото черно-белым и немного размыть его).
Пресеты: Для быстрого результата используйте готовые стили (Noir, Vintage, Dream).
Экспорт: Скопируйте сгенерированную строку кода из нижнего поля и вставьте в свой CSS-файл.

Подробный разбор CSS-фильтров

grayscale() — Оттенки серого

Превращает изображение в черно-белое. Значение 100% делает фото полностью серым, а 0% оставляет оригинал. Часто используется для логотипов партнеров, которые становятся цветными при наведении курсора (:hover).

blur() — Размытие

Применяет эффект размытия по Гауссу. Значение указывается в пикселях (px). Чем выше число, тем сильнее размытие. Идеально подходит для создания фоновых подложек под текст, чтобы улучшить его читаемость.

sepia() — Эффект старины

Придает изображению теплый коричневатый оттенок, имитируя старые фотографии начала XX века. Значение 100% дает полный эффект сепии.

hue-rotate() — Сдвиг цвета

Поворачивает цвета изображения по цветовому кругу. Значение задается в градусах (deg). Например, 90deg может превратить красное яблоко в зеленое без потери текстуры.

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

Вы можете применять фильтры не только к картинкам <img>, но и к любым блокам. Вот пример создания эффекта при наведении:

/* Исходное состояние: черно-белое и слегка размытое */
.gallery-item {
    transition: filter 0.3s ease;
    filter: grayscale(100%) blur(2px);
}

/* При наведении: цветное и четкое */
.gallery-item:hover {
    filter: grayscale(0%) blur(0px);
}

Производительность и поддержка

Современные браузеры (Chrome, Firefox, Safari, Edge) отлично поддерживают свойство filter и используют аппаратное ускорение видеокарты для его отрисовки. Это значит, что CSS-эффекты работают очень быстро и плавно, не нагружая процессор так сильно, как это делают Canvas или JS-библиотеки.