В этой статье
Свойство CSS filter объяснено
Свойство CSS filter применяет графические эффекты — размытие, яркость, контраст и цветовые сдвиги — к любому HTML-элементу. Оно работает с изображениями, фонами, текстом и даже целыми секциями страницы. Фильтры обрабатываются GPU браузера, что делает их эффективными для визуальных эффектов в реальном времени.
CSS предоставляет девять встроенных функций фильтров: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate и sepia. Их можно объединять в одной декларации filter для создания сложных визуальных эффектов. Порядок фильтров важен — каждая функция обрабатывает вывод предыдущей.
Как работает каждая функция фильтра
Каждая функция фильтра принимает одно значение и трансформирует визуальный вывод элемента. Понимание того, что делает каждая функция, помогает эффективно их комбинировать.
- blur(px) — применяет гауссово размытие, делая элемент нечётким. Более высокие значения создают более сильное размытие. Полезно для фоновых наложений и эффектов матового стекла
- brightness(%) и contrast(%) — brightness масштабирует общую яркость (100% без изменений, 200% удвоенная), а contrast регулирует разницу между светлыми и тёмными участками
- grayscale(%), sepia(%) и hue-rotate(deg) — grayscale удаляет насыщенность цвета, sepia добавляет тёплый коричневый тон, а hue-rotate сдвигает все цвета по цветовому кругу
Попробуйте бесплатно — без регистрации
Сгенерировать CSS-фильтры →Создание эффектов в стиле Instagram
Накладывая несколько функций CSS-фильтров, можно воссоздать популярные эффекты фотофильтров полностью в коде. Эти эффекты применяются в реальном времени к любому элементу изображения.
- Винтажный вид — сочетайте sepia(60%) с contrast(110%) и brightness(90%) для создания тёплого, выцветшего фотографического эффекта, напоминающего старые плёночные камеры
- Чёрно-белый — используйте grayscale(100%) с contrast(120%) для монохромного эффекта с высоким контрастом. Добавьте brightness(110%) для более яркого чёрно-белого вида
- Драматическое настроение — сложите contrast(150%) с saturate(130%) и brightness(80%) для яркой, затемнённой атмосферы, где цвета выделяются на глубоких тенях
Часто задаваемые вопросы
Можно ли использовать SVG-фильтры со свойством CSS filter?
Да. Функция url() в CSS filter позволяет ссылаться на пользовательские определения SVG-фильтров для эффектов, выходящих за рамки встроенных функций. Это позволяет создавать продвинутые эффекты, такие как карты смещения и цветовые матрицы.
Влияют ли CSS-фильтры на производительность?
CSS-фильтры ускоряются GPU в современных браузерах, что делает их эффективными для большинства случаев. Простые фильтры на изображениях имеют минимальное влияние. Однако применение размытия к большим областям может вызвать падение кадров на менее мощных устройствах.
Можно ли анимировать фильтры при наведении?
Да. CSS-фильтры безупречно работают с переходами и анимациями. Распространённый паттерн — применение фильтра grayscale или blur по умолчанию и переход к оригинальному виду при наведении, создавая плавные эффекты с ускорением GPU.