Фильтры и эффекты

Свойство filter — это набор готовых обработок: размыть, осветлить, обесцветить, повернуть цвета. Раньше ради каждой из них картинку правили в редакторе и хранили вторую копию файла.

Теперь копия не нужна: наведение, тёмная тема, состояние «недоступно» — всё это варианты одного и того же изображения.

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

filter: blur(4px) brightness(1.5) сначала размывает, потом осветляет размытое. filter: brightness(1.5) blur(4px) сначала осветляет, потом размывает уже осветлённое — результат другой.

Это разные вещи, и путаница здесь стоит дорого.

box-shadow рисует тень от прямоугольника элемента. Он ничего не знает про содержимое: у PNG с прозрачным фоном тень получится квадратной, вокруг пустоты.

filter: drop-shadow() обводит непрозрачные пиксели. Тень повторяет силуэт картинки, текст или фигуру, обрезанную через clip-path.

<div class="row">  <figure>    <div class="star star--box"></div>    <figcaption>box-shadow</figcaption>  </figure>​  <figure>    <div class="drop"><div class="star"></div></div>    <figcaption>drop-shadow</figcaption>  </figure></div>

.star {  width: 90px;  height: 90px;  background: linear-gradient(135deg, #7c5cff, #b06cff);  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);}​/* Тень от прямоугольника — обрезка её просто съедает */.star--box {  box-shadow: 0 8px 16px rgb(20 24 48 / .5);}​/* Тень по силуэту: фильтр на родителе */.drop {  filter: drop-shadow(0 8px 10px rgb(20 24 48 / .5));}​.row { display: flex; gap: 30px; }figure { margin: 0; display: grid; gap: 8px; justify-items: center; }figcaption { font-size: 13px; color: #666; }

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

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

<div class="scene">  <div class="glass">    <h3>Кофейня «Полка»</h3>    <p>Панель читается, потому что под ней размытие плюс подложка.</p>  </div></div>

.scene {  padding: 30px;  border-radius: 14px;  background:    radial-gradient(circle at 20% 25%, #ffd166 0 16%, transparent 17%),    radial-gradient(circle at 78% 70%, #4bd1a0 0 20%, transparent 21%),    linear-gradient(135deg, #6544e0, #f2777a);}​.glass {  padding: 18px;  border-radius: 12px;​  /* Размывает фон ЗА панелью */  backdrop-filter: blur(12px) saturate(140%);  -webkit-backdrop-filter: blur(12px) saturate(140%);​  /* Полупрозрачная подложка обязательна:     без неё текст ляжет на пёстрый фон */  background: rgb(255 255 255 / .3);  border: 1px solid rgb(255 255 255 / .45);  color: #16181d;}​.glass h3 { margin: 0 0 6px; font-size: 17px; }.glass p { margin: 0; font-size: 14px; }

У drop-shadow есть применение, о котором часто забывают: тень для текста сложной формы и для иконок-контуров.

Свойство text-shadow работает только с текстом и не умеет обводить SVG. А drop-shadow обведёт что угодно — надпись, иконку из спрайта, вырезанную фигуру, — потому что смотрит на непрозрачные пиксели, а не на тип элемента.

1/* Мягкая тень делает белый текст читаемым на светлых участках */2.caption {3  color: #fff;4  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .8));5}67/* Тот же приём для иконки из спрайта */8.icon--onphoto {9  filter: drop-shadow(0 1px 3px rgb(0 0 0 / .7));10}

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

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

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

1<svg width="0" height="0" aria-hidden="true">2  <filter id="grain">3    <!-- Генерируем шум -->4    <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3"/>5    <!-- И приглушаем его -->6    <feColorMatrix type="saturate" values="0"/>7    <feComponentTransfer>8      <feFuncA type="linear" slope="0.35"/>9    </feComponentTransfer>10  </filter>11</svg>

1.hero::after {2  content: "";3  position: absolute;4  inset: 0;5  filter: url(#grain);6  mix-blend-mode: overlay;7  pointer-events: none;8}

1@layer components {2  /* Липкая шапка. Размытие — только когда страница прокручена */3  .header {4    position: sticky;5    inset-block-start: 0;6    background: color-mix(in oklab, var(--bg) 86%, transparent);7  }89  .header.is-scrolled {10    backdrop-filter: blur(14px) saturate(140%);11    -webkit-backdrop-filter: blur(14px) saturate(140%);12  }1314  /* Недоступный товар: обесцвечен, но остаётся читаемым */15  .product[data-out-of-stock] .product__media {16    filter: grayscale(1) contrast(.9);17  }1819  /* Логотипы партнёров: одноцветные, цвет проявляется при наведении */20  .partners img {21    filter: grayscale(1) opacity(.65);22    transition: opacity .25s ease;23  }2425  .partners a:hover img,26  .partners a:focus-visible img {27    /* Меняем только прозрачность — фильтр остаётся прежним */28    opacity: 1;29  }30}

• Прятать содержимое размытием. Размытый текст остаётся в разметке и читается программой чтения с экрана; выделить и скопировать его тоже можно. Для скрытия данных это не годится.
• Стекло на пёстром фоне без подложки. Панель будет выглядеть эффектно на скриншоте и станет нечитаемой на настоящей фотографии.
• Анимировать filter. Каждый кадр считается заново. Анимируй opacity отдельного слоя.
• Чинить фильтром плохую картинку. contrast и saturate не вернут детали, которых нет в файле. Это косметика, а не восстановление: пересохранить исходник в нужном размере всегда лучше.

1/* База: плотная подложка, читается всегда */2.panel { background: rgb(255 255 255 / .92); }34/* Улучшение: там, где размытие есть, подложку делаем легче */5@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {6  .panel {7    background: rgb(255 255 255 / .3);8    backdrop-filter: blur(12px);9    -webkit-backdrop-filter: blur(12px);10  }11}

<div class="scene">  <div class="glass">    <h3>Кофейня «Полка»</h3>    <p>Этот текст должен читаться на любом участке фона.</p>  </div>​  <div class="star-wrap">    <div class="star"></div>  </div></div>

.scene {  position: relative;  padding: 26px;  border-radius: 14px;  background:    radial-gradient(circle at 18% 22%, #ffd166 0 15%, transparent 16%),    radial-gradient(circle at 80% 72%, #4bd1a0 0 18%, transparent 19%),    linear-gradient(135deg, #6544e0, #f2777a);}​.glass {  padding: 16px;  border-radius: 12px;  color: #16181d;  /* 1. Сделай панель стеклянной */}​.glass h3 { margin: 0 0 6px; font-size: 17px; }.glass p { margin: 0; font-size: 14px; }​.star-wrap {  margin-top: 18px;  /* 3. Тень по силуэту — сюда */}​.star {  width: 70px;  height: 70px;  background: #fff;  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);  /* 2. Эта тень не видна из-за обрезки — убери её */  box-shadow: 0 8px 16px rgb(20 24 48 / .6);}

1<div class="scene">2  <div class="glass">3    <h3>Кофейня «Полка»</h3>4    <p>Этот текст должен читаться на любом участке фона.</p>5  </div>67  <div class="star-wrap">8    <div class="star"></div>9  </div>10</div>

1.scene {2  position: relative;3  padding: 26px;4  border-radius: 14px;5  background:6    radial-gradient(circle at 18% 22%, #ffd166 0 15%, transparent 16%),7    radial-gradient(circle at 80% 72%, #4bd1a0 0 18%, transparent 19%),8    linear-gradient(135deg, #6544e0, #f2777a);9}1011.glass {12  padding: 16px;13  border-radius: 12px;14  color: #16181d;1516  -webkit-backdrop-filter: blur(12px) saturate(140%);17  backdrop-filter: blur(12px) saturate(140%);18  background: rgb(255 255 255 / .3);19  border: 1px solid rgb(255 255 255 / .45);20}2122.glass h3 { margin: 0 0 6px; font-size: 17px; }23.glass p { margin: 0; font-size: 14px; }2425.star-wrap {26  margin-top: 18px;27  filter: drop-shadow(0 8px 10px rgb(20 24 48 / .5));28}2930.star {31  width: 70px;32  height: 70px;33  background: #fff;34  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);35}