Генератор фильтров CSS
Создавайте эффекты CSS-фильтров визуально. Настройте размытие, яркость, контраст, оттенки серого, вращение оттенка, инверсию, прозрачность, насыщенность и сепию. Бесплатно.
Или перетащите изображение на предпросмотр
Справка
Что такое свойство CSS filter?
CSS-свойство filter применяет графические эффекты, такие как размытие, сдвиг цвета и настройка контрастности к элементу. Фильтры применяются до композитинга элемента и влияют на весь элемент, включая границы и тени.
Все функции CSS-фильтров
blur(px): Применяет гауссово размытие.
brightness(%): Настраивает яркость. 100% = оригинал.
contrast(%): Настраивает контраст.
grayscale(%): Конвертирует в оттенки серого.
hue-rotate(deg): Вращает цвета на цветовом круге.
invert(%): Инвертирует цвета.
opacity(%): Настраивает прозрачность.
saturate(%): Настраивает насыщенность цветов.
sepia(%): Применяет тон сепии.
Вопросы производительности
CSS-фильтры ускоряются GPU в современных браузерах. Для лучшей производительности используйте will-change: filter на анимированных элементах.
Типичные варианты использования
Эффекты при наведении на изображения — оттенки серого в покое, цвет при наведении.
Состояние отключения — filter: grayscale(100%) opacity(50%).
Тёмная тема — filter: invert(1) hue-rotate(180deg).
Размытие фона — backdrop-filter: blur(10px).
Конфиденциальность
Вся генерация фильтров выполняется на 100% в вашем браузере. Данные не отправляются на сервер.