Свойство filter в CSS применяет визуальные эффекты к элементу — размытие, яркость, контраст и цветокоррекцию, работающие с изображениями, фонами и даже видео. В отличие от редакторов изображений, фильтры выполняются в браузере: они остаются чёткими при любом разрешении и плавно анимируются с помощью transition.
Перетаскивайте ползунки, чтобы складывать несколько функций фильтра в одну цепочку. Сцена-образец обновляется в реальном времени, а сгенерированный код объединяет всё в одно объявление filter, готовое для вашей таблицы стилей.
Frequently Asked Questions
Q: Какие функции фильтра есть в CSS?
Какие функции фильтра есть в CSS? blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() и drop-shadow(). В одном свойстве filter можно сцепить любое количество.
Q: Ускоряется ли CSS-фильтр на GPU?
Ускоряется ли CSS-фильтр на GPU? Да. Большинство функций фильтра выполняются на GPU и анимируются на 60fps. blur() и drop-shadow() самые тяжёлые — используйте их умеренно на крупных элементах.
Q: Влияет ли filter на макет?
Влияет ли filter на макет? Нет. Фильтры чисто визуальны — элемент сохраняет исходный размер и позицию в потоке документа. Для изменения размера используйте transform.
Q: Можно ли анимировать фильтры?
Можно ли анимировать фильтры? Да. Анимируйте свойство filter через transition или keyframes. Анимация между разными цепочками фильтров одинаковой длины интерполируется плавно.
Q: Как сделать изображение чёрно-белым с цветом при наведении?
Как сделать изображение чёрно-белым с цветом при наведении? Два состояния: img { filter: grayscale(100%); transition: filter .4s; } и img:hover { filter: grayscale(0); }. Классический приём для портфолио.
Русские традиционные цвета
От гжельской синевы до хохломского золота — русская палитра рождена народными промыслами, иконописью и северной природой. Эти цвета до сих пор вдохновляют дизайнеров по всему миру.
Алый #FF2400Алый цвет знамён, сарафанов и праздничной символики
Васильковый #6495EDЦвет полевых васильков — символ русских лугов
Золото Хохломы #D4AF37Золотой орнамент хохломской росписи
Гжель Синий #005A9CКобальтовая синева гжельской керамики
Изумрудный #50C878Цвет уральских самоцветов и малахита
Бордовый #800020Тёмно-красный цвет театральных занавесов
Янтарный #FFBF00Балтийский янтарь — золото Калининграда
Сиреневый #C8A2C8Нежная сирень майских садов
Охристый #CC7722Цвет иконописи и древних фресок
Снежно-белый #F8F8FFБелый снег русских зим
Q: Что такое гжель?
Что такое гжель? Гжель (#005A9C) — традиционная русская керамика с синей кобальтовой росписью на белом фоне, производимая в Подмосковье с XVIII века и ставшая символом русского народного искусства.
Q: Что такое хохлома?
Что такое хохлома? Хохлома — традиционная деревянная роспись с золотым орнаментом (#D4AF37) на чёрном или красном фоне, создаваемая в Нижегородской области с XVII века.