Edit on
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  <defs>
    <filter id="backdrop-filter-blur" x="0" y="0" width="100%" height="100%">
      <!-- can't use xlink:href="#image": no support in FF -->
      <feImage x="0" y="0" width="300" height="300" xlink:href="http://unsplash.it/300/300?image=34"/>
      <!-- blur image -->
      <feGaussianBlur stdDeviation="3" />
      <!-- improve blur at the edges -->
      <feComponentTransfer result="blur">
        <feFuncA type="discrete" tableValues="1 1"/>
      </feComponentTransfer>
      <!-- increase opacity of sourceGraphic -->
      <feComponentTransfer in="SourceGraphic" result="source">
        <feFuncA type="linear" slope="2" intercept="0"/>
      </feComponentTransfer>
      <!-- Clip blur based on source -->
      <feComposite operator="in" in="blur" in2="source" />
      <!-- Merge -->
      <feMerge>
        <feMergeNode  />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
    <image id="image" xlink:href="http://unsplash.it/300/300?image=34" x="0" y="0" height="300" width="300"></image>
  </defs>
</svg>

<svg class="box">
  <use xlink:href="#image"></use>
</svg>

<div class="box effect">
  SVG backdrop-filter blur
</div>
.box {
  position: absolute;
  width: 300px;
  height: 300px;
  left: 0; right: 0; margin: 50px auto;
  box-sizing: border-box;
  box-shadow: 0 0 5px rgba(0,0,0,.5);
}
.effect {
  height: auto;
  font: 2em sans-serif;
  padding: .8em;
  color: #fff;
  background: rgba(0,0,0,.5);
  overflow: hidden;
  box-shadow: none;
  border-radius: 0 0 50% 0;
}

/* support backdrop-filter */
@supports ( (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) ) {
  .effect {
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
  }
}

/* no support backdrop-filter */
@supports ( not ( (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) ) ) {
  .effect {
    -webkit-filter: url(#backdrop-filter-blur);
            filter: url(#backdrop-filter-blur);
  }
}


svg {
  position: absolute;
}
  
Rerun