Фильтры

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

Размытие

Свойство filter принимает одну или несколько функций. blur() размывает элемент на заданный радиус:

<style>
  .pic { width: 160px; height: 90px; display: inline-block; margin: 4px; background: linear-gradient(135deg, gold, crimson, mediumpurple); }
  .blur { filter: blur(4px); }
</style>
 
<div class="pic"></div>
<div class="pic blur"></div>

Функции фильтров

Функция	Что делает
`blur(4px)`	Размывает
`grayscale(1)`	Делает чёрно-белым; `0.5` — наполовину
`brightness(1.5)`	Меняет яркость: больше 1 — светлее
`contrast(2)`	Меняет контраст
`sepia(1)`	Старая фотография, коричневые тона
`hue-rotate(90deg)`	Сдвигает все оттенки по цветовому кругу
`opacity(0.5)`	Прозрачность

<style>
  .row { display: flex; gap: 6px; flex-wrap: wrap; }
  .row div { width: 90px; height: 60px; background: linear-gradient(135deg, gold, crimson, mediumpurple); color: white; font-size: 12px; padding: 4px; }
</style>
 
<div class="row">
  <div style="filter: grayscale(1)">grayscale</div>
  <div style="filter: brightness(1.5)">brightness</div>
  <div style="filter: contrast(2)">contrast</div>
  <div style="filter: sepia(1)">sepia</div>
  <div style="filter: hue-rotate(90deg)">hue-rotate</div>
</div>

Несколько фильтров и переход

Функции перечисляют через пробел, они применяются по очереди. Фильтры плавно анимируются — наведите курсор на карточку:

<style>
  .card { width: 200px; padding: 30px 12px; color: white; background: linear-gradient(135deg, seagreen, steelblue);
    filter: grayscale(1) brightness(0.8); transition: filter 0.4s; }
  .card:hover { filter: none; }
</style>
 
<div class="card">Цвет появляется при наведении</div>

Тень по контуру

box-shadow всегда прямоугольная — она повторяет рамку блока. Фильтр drop-shadow() повторяет настоящую форму: прозрачные места тени не дают. Это важно для иконок и картинок со сложным контуром:

<style>
  svg { margin: 10px; }
  .box-sh { box-shadow: 4px 4px 6px gray; }
  .drop { filter: drop-shadow(4px 4px 3px gray); }
</style>
 
<svg class="box-sh" width="80" height="80" viewBox="0 0 24 24"><path fill="gold" d="M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z"/></svg>
<svg class="drop" width="80" height="80" viewBox="0 0 24 24"><path fill="gold" d="M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z"/></svg>

Слева тень у квадрата вокруг звезды, справа — у самой звезды.

Матовое стекло

backdrop-filter обрабатывает не сам элемент, а то, что видно за ним. Полупрозрачный блок с размытием фона даёт эффект матового стекла:

<style>
  .scene { padding: 24px; background: linear-gradient(135deg, gold, crimson, mediumpurple); }
  .glass { padding: 16px; background: rgb(255 255 255 / 0.3); backdrop-filter: blur(8px); border-radius: 12px; }
  .circle { width: 70px; height: 70px; border-radius: 50%; background: white; margin-bottom: -40px; }
</style>
 
<div class="scene">
  <div class="circle"></div>
  <div class="glass">Белый круг за стеклом размыт, а текст чёткий</div>
</div>

Частая ошибка

filter размывает элемент вместе со всеми детьми. Если написать blur() на карточке, чтобы размыть её фон, расплывётся и текст:

<style>
  .card { padding: 20px; color: white; background: linear-gradient(135deg, seagreen, steelblue); filter: blur(3px); }
</style>
 
<div class="card">Текст тоже размыт</div>

Чтобы размыть то, что за блоком, используйте backdrop-filter. Чтобы размыть только фон самого блока, вынесите фон в отдельный слой — например, в абсолютно позиционированный элемент под текстом.

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