filter

Свойство filter даёт возможность прямо в CSS применять к элементам различные графические эффекты. Например, перекрасить элемент в сепию, добавить ему необычную тень или использовать SVG в качестве фильтра.

Сделаем фотографию чёрно-белой, а по наведению курсора она снова будет становиться цветной:

        
          
          img {  filter: grayscale(1);}img:hover {  filter: none;}
          img {
  filter: grayscale(1);
}

img:hover {
  filter: none;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Фильтры — очень мощный инструмент, он позволяет реализовать многие дизайнерские идеи при помощи одной строчки кода. Фильтры можно применить не только к картинкам, но и к любым непустым элементам.

В использовании фильтров удобно то, что исходная картинка или элемент никак не изменяются сами по себе. Меняется только их визуальное отображение в браузере. А это значит, что вы сможете использовать их повторно в других ситуациях с другими фильтрами или совсем без них.

Можно не только задавать статичные визуальные эффекты, но и анимировать их!

В качестве значения можно использовать любые функции фильтров, либо ключевое слово none для отключения любых фильтров.

💡 К SVG и его внутренним тегам тоже можно применить фильтры, кроме тега <defs>.

💡 Можно указать несколько функций через пробел. Причём при разном порядке функций результат будет отличаться.