CSS свойство filter

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

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

Когда использовать свойство filter

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

Затемнение или тонирование главного изображения за текстом (brightness, grayscale, sepia) вместо редактирования ресурса в графическом редакторе.
Размытие фона (blur), чтобы контент переднего плана оставался читаемым.
Привлечение внимания при наведении путём снятия фильтра оттенков серого для отображения полного цвета.
Добавление тени, следующей за прозрачностью, с помощью drop-shadow — в отличие от box-shadow, она огибает форму внутри PNG/SVG, а не прямоугольную рамку.

Поскольку фильтры выполняются на GPU и влияют только на представление, они плавно анимируются и никогда не изменяют исходный файл, что делает их идеальными для переходов и состояний при наведении.

Свойство filter принимает следующие функции:

none
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
url()

Начальное значение	none
Применяется к	Всем элементам.
Наследуется	Нет.
Анимируемое	Да.
Версия	CSS3
DOM Синтаксис	object.style.filter = "hue-rotate(360deg)";

Синтаксис

Синтаксис CSS свойства filter

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;

Примеры

Пример свойства filter со значением "blur":

Пример CSS свойства filter со значением blur

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: blur(3px);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter property example</h2>
    <p>For this image the filter is set to "blur(3px)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>

Попробуйте сами »

Результат

Пример использования свойства filter для осветления изображения:

Пример CSS свойства filter со значением brightness

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: brightness(150%);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter property example</h2>
    <p>For this image the filter is set to "brightness(150%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>

Попробуйте сами »

В следующем примере значение "grayscale" делает изображение серым:

Пример свойства filter со значением "grayscale":

Пример CSS свойства filter со значением grayscale

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: grayscale(80%);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "grayscale(80%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>

Попробуйте сами »

Здесь к изображению применён фильтр "saturate" со значением 300%.

Пример свойства filter со значением "saturate":

Пример CSS свойства filter со значением saturate

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: saturate(300%);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "saturate(300%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>

Попробуйте сами »

Пример свойства filter со значением "sepia":

Пример свойства filter со значением sepia

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: sepia(70%);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "sepia(70%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>

Попробуйте сами »

Пример свойства filter со значением "contrast":

Пример CSS свойства filter со значением contrast

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: contrast(40%);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "contrast(40%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>

Попробуйте сами »

Пример свойства filter со значением "opacity":

Пример CSS свойства filter со значением "opacity"

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: opacity(0.4);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "opacity(0.4)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>

Попробуйте сами »

Пример свойства filter со значением "invert":

Пример CSS свойства filter со значением "invert"

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: invert(0.7);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "invert(0.7)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>

Попробуйте сами »

Пример свойства filter со значением "hue-rotate":

Пример CSS свойства filter со значением "hue-rotate"

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: hue-rotate(90deg);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "hue-rotate(90deg)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>

Попробуйте сами »

Пример свойства filter со значением "drop-shadow":

drop-shadow() принимает те же аргументы, что и свойство box-shadow — offset-x, offset-y, необязательный радиус размытия и цвет — но следует непрозрачной форме изображения, а не его ограничивающему прямоугольнику. Именно поэтому это правильный выбор для PNG-иконок и SVG с прозрачностью.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: drop-shadow(8px 8px 10px gray);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>For this image the filter is set to "drop-shadow(8px 8px 10px gray)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>

Комбинирование нескольких фильтров

Можно применить несколько функций фильтра в одном объявлении, перечислив их через пробел. Они применяются в порядке написания, то есть результат одного передаётся в следующий — изменение порядка может изменить результат.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: grayscale(100%) brightness(120%) blur(2px);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Filter example</h2>
    <p>
      This image is first turned to grayscale, then brightened, then blurred.
    </p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>

Поскольку filter поддерживает анимацию, его сочетание с transition является распространённым приёмом — например, переход цветного фото из оттенков серого к полному цвету при наведении:

img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

img:hover {
  filter: grayscale(0%);
}

Важные замечания

Фильтр создаёт контекст наложения и (при любом значении, кроме none) содержащий блок для потомков — это может повлиять на расположение дочерних элементов с position: absolute и fixed.
Большие значения blur() ресурсозатратны. Большой радиус размытия на крупных элементах может ухудшить производительность прокрутки, особенно на мобильных устройствах.
opacity() против свойства opacity: функция фильтра применяет прозрачность как часть конвейера фильтров, тогда как самостоятельное свойство opacity проще и немного шире поддерживается — предпочитайте свойство, если только не комбинируете его с другими фильтрами.
Для фильтрации того, что находится позади полупрозрачного элемента (эффект матового стекла), нужно использовать backdrop-filter — отдельное свойство; filter влияет только на пиксели самого элемента.

Значения

Значение	Описание	Попробовать
none	Не применяет никакого эффекта. Это значение по умолчанию данного свойства.	Попробовать »
blur	Применяет размытие к изображению. Задаётся значением длины. Чем больше значение, тем сильнее размытие. Если значение не задано, используется 0.	Попробовать »
brightness	Делает изображение ярче. При значении 0 изображение будет чёрным. 100% — значение по умолчанию, показывает исходное изображение. Значения выше 100% делают изображение ярче.	Попробовать »
contrast	Регулирует контрастность изображения. При значении 0 изображение будет чёрным. 100% — значение по умолчанию, показывает исходное изображение. Значения выше 100% увеличивают контрастность.	Попробовать »
drop-shadow	Применяет эффект тени к изображению.	Попробовать »
grayscale	Переводит изображение в оттенки серого. 0% — значение исходного изображения. 100% делает изображение серым. Отрицательные значения не допускаются.	Попробовать »
hue-rotate	Применяет эффект поворота оттенка к изображению. Задаётся в градусах. Максимальное значение — 360 градусов.	Попробовать »
invert	Инвертирует пиксели изображения. 0 — значение по умолчанию. 100% полностью инвертирует изображение.	Попробовать »
opacity	Устанавливает уровень прозрачности изображения. Описывает степень прозрачности. При значении 0 изображение полностью прозрачно. 100% — текущее состояние изображения.	Попробовать »
saturate	Применяет эффект насыщенности к изображению. 0% делает изображение полностью ненасыщенным. 100% — значение по умолчанию. Значения выше 100% делают изображение сверхнасыщенным.	Попробовать »
sepia	Переводит изображение в сепию. Значение по умолчанию — 0%, 100% делает изображение полностью сепия.	Попробовать »
url	Функция url() принимает путь к SVG-файлу, содержащему фильтр, и может включать якорь для конкретного элемента фильтра.
initial	Устанавливает для свойства значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Когда использовать свойство filter

Синтаксис

Примеры

Пример свойства filter со значением "blur":

Результат

Пример использования свойства filter для осветления изображения:

Пример свойства filter со значением "grayscale":

Пример свойства filter со значением "saturate":

Пример свойства filter со значением "sepia":

Пример свойства filter со значением "contrast":

Пример свойства filter со значением "opacity":

Пример свойства filter со значением "invert":

Пример свойства filter со значением "hue-rotate":

Пример свойства filter со значением "drop-shadow":

Комбинирование нескольких фильтров

Важные замечания

Значения

Практика