css backdrop blur with sharp edges

README.md

css

background-color: rgba(0,0,0,.8);
backdrop-filter: url(#sharpBlur) saturate(180%);

html

<svg class="hideSvgSoThatItSupportsFirefox">
  <filter id="sharpBlur">
    <feGaussianBlur stdDeviation="30"></feGaussianBlur>
    <feColorMatrix type="matrix" values="1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 9 0"></feColorMatrix>
    <feComposite in2="SourceGraphic" operator="in"></feComposite>
  </filter>
</svg>