Исполняемые доки CSS: Размытие blur

Q: Как размыть элемент в CSS?

Используйте filter: blur(5px);. Длина это радиус размытия: 0 четко, а чем больше значение, тем сильнее размытие. Размывается элемент и все, что внутри, включая текст и изображения.

Q: Как размыть фон за элементом?

Задайте элементу backdrop-filter: blur(10px); с частично прозрачным фоном, например rgb(255 255 255 / 0.5). Собственное содержимое элемента остается четким, а все, что за ним, размывается: это эффект матового стекла.

Q: Чем drop-shadow() отличается от box-shadow?

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

Q: Как сделать изображение черно-белым в CSS?

Используйте filter: grayscale(100%); (или grayscale(1)). Добавьте переход и filter: grayscale(0) при наведении, чтобы вернуть цвет.

Q: Можно ли использовать несколько фильтров сразу?

Да, перечислите их через пробел: filter: grayscale(1) brightness(1.2) blur(1px);. Они применяются по порядку, поэтому порядок может менять результат. Второе объявление filter заменяет первое.

Как размыть элемент

filter: blur() принимает длину, радиус размытия. Чем он больше, тем сильнее размыт элемент:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS blur</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; }
    img { display: block; width: 160px; height: 100px; }
    .b2 { filter: blur(2px); }
    .b6 { filter: blur(6px); }
  </style>
</head>
<body>
  <div class="row">
    <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun"><figcaption>no filter</figcaption></figure>
    <figure><img class="b2" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun, slightly blurred"><figcaption>blur(2px)</figcaption></figure>
    <figure><img class="b6" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun, very blurred"><figcaption>blur(6px)</figcaption></figure>
  </div>
</body>
</html>

filter работает с любым элементом, а не только с изображениями: размытый div размывает и свой текст, рамку и дочерние элементы. Обратите внимание на мягкие края у размытых изображений: размытие растягивает картинку наружу и подмешивает прозрачную область вокруг. Решение ниже, в разделе «Проблема размытых краев».

Размытие фона: backdrop-filter

Чтобы размыть то, что за элементом (панель из матового стекла поверх фотографии или страницы), используйте backdrop-filter. Собственное содержимое элемента остается четким. Чтобы размытие было видно, нужен полупрозрачный фон:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>backdrop-filter</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .scene {
      position: relative;
      height: 200px;
      background:
        radial-gradient(circle at 25% 40%, #f59e0b 0 40px, transparent 41px),
        radial-gradient(circle at 70% 60%, #16a34a 0 55px, transparent 56px),
        repeating-linear-gradient(90deg, #2563eb 0 16px, #93c5fd 16px 32px);
    }
    .glass {
      position: absolute;
      inset: 40px 60px;
      display: grid;
      place-items: center;
      background: rgb(255 255 255 / 0.35);
      -webkit-backdrop-filter: blur(12px); /* older Safari */
      backdrop-filter: blur(12px);
      border: 1px solid rgb(255 255 255 / 0.6);
      border-radius: 12px;
      color: #111827;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="scene"><div class="glass">Sharp text on frosted glass</div></div>
</body>
</html>

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

Все функции фильтров вживую

Двигайте любой ползунок. Строка под изображением это точное значение filter, готовое к копированию:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Filter playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .controls { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 18px; }
    .controls input { vertical-align: middle; }
    #img { display: block; width: 220px; height: 138px; margin: 12px 0 8px; }
    code { display: block; background: #f3f4f6; padding: 6px; }
  </style>
</head>
<body>
  <div class="controls" id="controls"></div>
  <img id="img" alt="Hills and a sun" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E">
  <code id="out"></code>
  <script>
    // name, min, max, step, default (the value that changes nothing), unit
    const fns = [
      ['blur', 0, 10, 0.5, 0, 'px'], ['brightness', 0, 2, 0.05, 1, ''],
      ['contrast', 0, 2, 0.05, 1, ''], ['grayscale', 0, 1, 0.05, 0, ''],
      ['sepia', 0, 1, 0.05, 0, ''], ['saturate', 0, 3, 0.1, 1, ''],
      ['hue-rotate', 0, 360, 5, 0, 'deg'], ['invert', 0, 1, 0.05, 0, '']
    ];
    const controls = document.getElementById('controls');
    fns.forEach(([name, min, max, step, def]) => {
      controls.insertAdjacentHTML('beforeend', '<label>' + name + ' <input type="range" data-name="' + name + '" min="' + min + '" max="' + max + '" step="' + step + '" value="' + def + '"></label>');
    });
    const update = () => {
      const parts = fns.filter(([name, , , , def]) => Number(controls.querySelector('[data-name="' + name + '"]').value) !== def)
        .map(([name, , , , , unit]) => name + '(' + controls.querySelector('[data-name="' + name + '"]').value + unit + ')');
      const value = parts.join(' ') || 'none';
      document.getElementById('img').style.filter = value;
      document.getElementById('out').textContent = 'filter: ' + value + ';';
    };
    controls.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Выводятся только функции, которые вы сдвинули с нейтрального значения, поэтому значение остается коротким. brightness(1) или blur(0px) ничего не меняют, так что перечислять их незачем.

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

Функция	Нейтральное значение	Что делает	Пример
`blur(r)`	`0`	гауссово размытие с радиусом r	`blur(4px)`
`brightness(n)`	`1`	темнее ниже 1, ярче выше	`brightness(0.7)`
`contrast(n)`	`1`	площе ниже 1, контрастнее выше	`contrast(1.3)`
`grayscale(n)`	`0`	1 (или 100%) полностью серый	`grayscale(100%)`
`sepia(n)`	`0`	теплый коричневый тон	`sepia(0.6)`
`saturate(n)`	`1`	0 серый, выше 1 насыщеннее	`saturate(1.5)`
`hue-rotate(a)`	`0deg`	сдвигает каждый тон по цветовому кругу	`hue-rotate(90deg)`
`invert(n)`	`0`	1 это полный цветовой негатив	`invert(1)`
`opacity(n)`	`1`	как свойство `opacity`	`opacity(0.5)`
`drop-shadow(x y blur color)`		тень, которая повторяет форму	`drop-shadow(2px 4px 6px rgb(0 0 0 / 0.3))`

Числа можно задавать и в процентах (grayscale(100%) равно grayscale(1)). Несколько функций записываются в одно значение через пробел и применяются по порядку: filter: grayscale(1) sepia(1) дает коричневый оттенок, а sepia(1) grayscale(1) в итоге просто серый.

drop-shadow повторяет форму

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>drop-shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 40px; padding: 10px 20px; }
    img { width: 90px; height: 90px; display: block; }
    .box-shadow { box-shadow: 6px 6px 8px rgb(0 0 0 / 0.4); }
    .drop-shadow { filter: drop-shadow(6px 6px 4px rgb(0 0 0 / 0.4)); }
  </style>
</head>
<body>
  <div class="row">
    <figure><img class="box-shadow" alt="Star" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z'/%3E%3C/svg%3E"><figcaption>box-shadow</figcaption></figure>
    <figure><img class="drop-shadow" alt="Star" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z'/%3E%3C/svg%3E"><figcaption>drop-shadow()</figcaption></figure>
  </div>
</body>
</html>

Первая звезда отбрасывает квадратную тень от своего невидимого ограничивающего блока. Вторая отбрасывает тень в форме звезды. В отличие от box-shadow, у drop-shadow() нет значения spread и нет inset; они разобраны на странице тень box-shadow.

Проблема размытых краев

Размытое изображение бледнеет по краям, потому что размытие подтягивает прозрачные пиксели вокруг. Чтобы сохранить четкий край (например, для размытого фона в шапке), поместите изображение в контейнер с overflow: hidden и немного увеличьте изображение, чтобы мягкий край обрезался:

.hero { overflow: hidden; }
.hero img { filter: blur(8px); transform: scale(1.1); }

Эффекты при наведении через filter

filter можно анимировать переходом, поэтому стена логотипов, которые из серых становятся цветными, или карточка, затемненная до наведения, делаются двумя правилами:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Filter on hover</title>
  <style>
    .logo {
      width: 120px;
      height: 70px;
      display: inline-block;
      background: linear-gradient(135deg, #2563eb, #16a34a);
      border-radius: 8px;
      filter: grayscale(1) opacity(0.6);
      transition: filter 0.3s ease;
    }
    .logo:hover, .logo:focus-visible { filter: none; }
  </style>
</head>
<body>
  <a class="logo" href="#" aria-label="Partner one"></a>
  <a class="logo" href="#" aria-label="Partner two"></a>
</body>
</html>

Наведите курсор на плитку (или перейдите к ней табом), и ее цвет плавно проявится.

Полезно знать

Производительность. Больше всего стоят большие радиусы размытия на больших площадях, особенно backdrop-filter на элементах, которые двигаются или прокручиваются. Проверяйте на телефоне.
Читаемость. Никогда не размывайте текст, который людям нужно прочитать, и проверяйте контрастность текста поверх матовой панели.
Наложение. Любой filter, кроме none, создает новый контекст наложения и становится содержащим блоком для потомков с position: fixed, как и transform.

Частые ошибки

filter: blur(5). Радиусу нужна единица: blur(5px).
filter: blur() для матовой панели. Он размывает собственный текст панели. Используйте backdrop-filter с прозрачным фоном.
backdrop-filter ничего не показывает. Фон элемента должен быть хотя бы частично прозрачным, и за ним должно что-то быть.
Два объявления filter. Второе заменяет первое. Пишите все функции в одно значение.
Квадратные тени у прозрачных иконок. Используйте filter: drop-shadow() вместо box-shadow.

Часто задаваемые вопросы

Как размыть элемент в CSS?

Используйте filter: blur(5px);. Длина это радиус размытия: 0 четко, а чем больше значение, тем сильнее размытие. Размывается элемент и все, что внутри, включая текст и изображения.

Как размыть фон за элементом?

Задайте элементу backdrop-filter: blur(10px); с частично прозрачным фоном, например rgb(255 255 255 / 0.5). Собственное содержимое элемента остается четким, а все, что за ним, размывается: это эффект матового стекла.

Чем drop-shadow() отличается от box-shadow?

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

Как сделать изображение черно-белым в CSS?

Используйте filter: grayscale(100%); (или grayscale(1)). Добавьте переход и filter: grayscale(0) при наведении, чтобы вернуть цвет.

Можно ли использовать несколько фильтров сразу?

Да, перечислите их через пробел: filter: grayscale(1) brightness(1.2) blur(1px);. Они применяются по порядку, поэтому порядок может менять результат. Второе объявление filter заменяет первое.

Связанные концепции