How to blur the background

Short answer

backdrop-filter blurs whatever lies under the element. The element's background must be semi-transparent:

<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>

A header over scrolling content

A popular trick is a sticky header with the page blurred behind it:

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

Blurring the element itself

filter: blur() blurs the element itself with all its content — for example, an image behind a dialog or a spoiler:

<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>

Common mistake

backdrop-filter on an element with a solid background shows no visible effect: the blurred content is covered by an opaque color. Make the background semi-transparent with rgb(... / 30%). Heavy blur over large areas also strains slow devices — do not blur the whole screen without need.