JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
Regular with <a href="https://developer.mozilla.org/en/docs/Web/CSS/filter">CSS3 Filter</a>
</h1>
<h4>
<a href="https://developer.mozilla.org/en/docs/Web/CSS/filter#Browser_compatibility">Not available on any IE (desktop or mobile)</a>
</h4>
<img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="private">
<img src="https://www.drupal.org/files/profile_default.png">
<img src="https://thebenclark.files.wordpress.com/2014/03/facebook-default-no-profile-pic.jpg" class="private">
<img src="http://buira.org/assets/images/shared/default-profile.png">

<h1>
With SVG <a href="https://developer.mozilla.org/en-US/docs/Web/API/SVGClipPathElement">ClipPath</a>
</h1>
<h4>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/SVGClipPathElement#Browser_compatibility">Not available on Android Mobile, and unknown if available on IE mobile</a>
</h4>
<img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="private clip">
<img src="https://www.drupal.org/files/profile_default.png" class="clip">
<img src="https://thebenclark.files.wordpress.com/2014/03/facebook-default-no-profile-pic.jpg" class="private clip">
<img src="http://buira.org/assets/images/shared/default-profile.png" class="clip">

CSS

img {
  width: 150px;
  height: 150px;
  display: inline-block;
}
.private {
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.clip {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
}