CSS свойство filter

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

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

Значения

Значение по умолчанию none
Применяется К элементам, у которых значение display установлено как table-cell.
Наследуется Нет
Анимируемое Да
Версия CSS3
DOM синтаксис object.style.WebkitFilter = "hue-rotate(360deg)";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img {
      -webkit-filter: blur(3px); /* Safari 6.0 - 9.0 */
      filter: blur(3px);
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства filter</h2>
    <p>Для этого изображения установлен фильтр "blur(3px)".</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 {
      -webkit-filter: brightness(120%);/* Safari 6.0 - 9.0 */
      filter: brightness(150%);
      }
    </style>
  </head>
  <body>
    <h2>Заголовок документа</h2>
    <p>Для этого изображения установлен фильтр "brightness(150%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image"> 
    </p>
  </body>
</html>

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img {
      -webkit-filter: grayscale(80%);/* Safari 6.0 - 9.0 */
      filter: grayscale(80%);
      }
    </style>
  </head>
  <body>
    <h2>Пример фильтра</h2>
    <p>Для этого изображения установлен фильтр "grayscale(80%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image">
    </p>
  </body>
</html>

Пример с применением фильтра "saturate", где заданное значение равно 300%:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
      -webkit-filter: saturate(300%);/* Safari 6.0 - 9.0 */
      filter: saturate(300%);
      }
    </style>
  </head>
  <body>
    <h2>Заголовок документа</h2>
    <p>Для этого изображения установлен фильтр "saturate(300%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image">
    </p>
  </body>
</html>

Значения

Значение Описание
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() принимает в качестве параметра ссылку на XML файл, определяющий SVG фильтр, и может включать якорь, указывающий какой-либо фильтр элемента.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
53.0
18.0 -webkit-
12.0
-webkit-
35.0
+ 49.0 -webkit-
6.0
-webkit-
40.0
+ 15.0 -webkit-

Практикуйте свои знания

Какие фильтры CSS можно применить к изображениям?
Считаете ли это полезным?