Viewport UI - Uma coleção curada de experiências em UI.: Blur progressivo em CSS

Os CSS é apenas um backdrop-filter e um mask-image:

.blur {
  backdrop-filter: blur(40px);
  mask-image: linear-gradient(to bottom, transparent 25%, black 75%);
}