<filter-function>

Тип данных <filter-function> задается с помощью одной из функций фильтра, перечисленных ниже. Каждая функция требует аргумента, при некорректном вводе которого фильтр не применяется.

blur()

Размывает изображение.

brightness()

Делает изображение светлее или темнее.

contrast()

Увеличивает или уменьшает контраст изображения.

drop-shadow()

Добавляет тень к изображению.

grayscale()

Преобразует изображение в оттенки серого.

hue-rotate()

Изменяет общий оттенок изображения.

invert()

Инвертирует цвета изображения.

opacity()

Делает изображение прозрачным.

saturate()

Увеличивает или уменьшает насыщенность входного изображения.

sepia()

Преобразует изображение в сепию.

<filter-function> = 
  <blur()>         |
  <brightness()>   |
  <contrast()>     |
  <drop-shadow()>  |
  <grayscale()>    |
  <hue-rotate()>   |
  <invert()>       |
  <opacity()>      |
  <sepia()>        |
  <saturate()>     

<blur()> = 
  blur( <length>? )  

<brightness()> = 
  brightness( [ <number> | <percentage> ]? )  

<contrast()> = 
  contrast( [ <number> | <percentage> ]? )  

<drop-shadow()> = 
  drop-shadow( [ <color>? && <length>{2,3} ] )  

<grayscale()> = 
  grayscale( [ <number> | <percentage> ]? )  

<hue-rotate()> = 
  hue-rotate( [ <angle> | <zero> ]? )  

<invert()> = 
  invert( [ <number> | <percentage> ]? )  

<opacity()> = 
  opacity( [ <number> | <percentage> ]? )  

<sepia()> = 
  sepia( [ <number> | <percentage> ]? )  

<saturate()> = 
  saturate( [ <number> | <percentage> ]? )  

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

div {
  width: 100%;
  height: 512px;
  background: url(fx-nightly-512.png);
  background-repeat: no-repeat;
  background-position: center center;
  filter: <filter-function>(<value>);
}

Где <filter-function> — это выбранный вами фильтр из выпадающего списка, а <value> — это значения, заданные с помощью ползунка:

<div></div>
<ul>
  <li>
    <label for="filter-select">Choose a filter function:</label>
    <select id="filter-select">
      <option selected>blur</option>
      <option>brightness</option>
      <option>contrast</option>
      <option>drop-shadow</option>
      <option>grayscale</option>
      <option>hue-rotate</option>
      <option>invert</option>
      <option>opacity</option>
      <option>saturate</option>
      <option>sepia</option>
    </select>
  </li>
  <li><input type="range" /><output></output></li>
  <li>
    <p>Current value: <code></code></p>
  </li>
</ul>

div {
  width: 100%;
  height: 512px;
  background-image: url(https://mdn.github.io/shared-assets/images/examples/fx-nightly-512.png);
  background-repeat: no-repeat;
  background-position: center center;
}

li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

input {
  width: 60%;
}

output {
  width: 5%;
  text-align: center;
}

select {
  width: 40%;
  margin-left: 2px;
}

• Свойства, использующие этот тип данных: filter и backdrop-filter