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

Короткий ответ

backdrop-filter размывает то, что находится под элементом. Фон элемента должен быть полупрозрачным:

<div style="display: grid; place-items: center; height: 180px; background: url(/media/photo-400x250.jpg) center / cover;">
  <div style="padding: 16px 24px; border-radius: 12px; background: rgb(255 255 255 / 30%); backdrop-filter: blur(8px); border: 1px solid rgb(255 255 255 / 50%);">Frosted glass</div>
</div>

Шапка над прокручиваемым содержимым

Популярный приём — липкая шапка, сквозь которую размыто видно страницу:

header {
  position: sticky; top: 0;
  background: rgb(255 255 255 / 70%);
  backdrop-filter: blur(10px) saturate(150%);
}

Размыть сам элемент

filter: blur() размывает сам элемент со всем содержимым — например, картинку за модальным окном или спойлер:

<style>
  .spoiler { filter: blur(5px); transition: filter 0.3s; cursor: pointer; }
  .spoiler:hover { filter: none; }
</style>
 
<p>The killer is <span class="spoiler">the butler</span>.</p>

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

backdrop-filter на элементе со сплошным фоном не даёт видимого эффекта: размытое содержимое закрыто непрозрачным цветом. Сделайте фон полупрозрачным через rgb(... / 30%). А сильное размытие на больших площадях нагружает слабые устройства — не размывайте весь экран без нужды.