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

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

Фильтры задаются с помощью свойства filter. Начнём знакомство с ними.

Яркость — brightness. Допустимы числовые значения от 0 и выше или проценты. Со значением фильтра 1 или 100% элемент отображается без изменений.

.effect {
  filter: brightness(2); /* увеличивает яркость вдвое */
  filter: brightness(10%); /* снижает яркость до 10% */
  filter: brightness(150%); /* увеличивает яркость на 50% */
}

Контрастность — contrast. Как и у фильтра яркости в качестве значения можно использовать числа или проценты.

.effect {
  filter: contrast(0.5); /* снижает контрастность наполовину */
  filter: contrast(50%); /* тоже снижает контрастность до 50% */
 }

CSS-фильтры уже поддерживаются в этих браузерах.