Справочник HTML & CSS

filter

Графические эффекты элемента: размытие, чёрно-белый режим, яркость, тень по форме.

Синтаксис

filter: function() …;

Значения

Параметр	Тип	Описание
blur()	function	Размытие: `blur(4px)`.
grayscale()	function	Чёрно-белый: `grayscale(1)`.
brightness() \| contrast()	function	Яркость и контраст: `brightness(1.2)`.
drop-shadow()	function	Тень по форме содержимого, в том числе прозрачных PNG.

Примеры

Разные фильтры на одной фотографии:

<style>
  img { width: 90px; margin: 4px; }
</style>
 
<img src="/media/photo-200x200.jpg" alt="">
<img src="/media/photo-200x200.jpg" alt="" style="filter: grayscale(1);">
<img src="/media/photo-200x200.jpg" alt="" style="filter: blur(3px);">
<img src="/media/photo-200x200.jpg" alt="" style="filter: brightness(1.4) contrast(1.2);">

Цвет при наведении:

<style>
  .logo { filter: grayscale(1); opacity: 0.6; transition: filter 0.3s, opacity 0.3s; width: 90px; }
  .logo:hover { filter: none; opacity: 1; }
</style>
 
<img class="logo" src="/media/photo-200x200.jpg" alt="">

Примечания

Несколько фильтров перечисляют через пробел. filter действует на весь элемент вместе с детьми; для фона за элементом берите backdrop-filter.

См. также

backdrop-filter — Применяет фильтры ко всему, что находится за элементом, — эффект матового стекла.
mix-blend-mode — Как цвета элемента смешиваются с тем, что под ним, — как режимы слоёв в графическом редакторе.
box-shadow — Тень вокруг блока элемента.

Вопросы и ответы по теме

В учебнике

Фильтры — Свойство filter — размытие, чёрно-белый режим, яркость, контраст и тень по контуру drop-shadow, а также backdrop-filter для эффекта матового стекла.

Спасибо, что читаете!