JSFiddle - React, Tailwind, and code Playground

by Lachlan Arthur

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="0" width="0">
  <defs>
    <filter id="blur" x="0" y="0">
      <feGaussianBlur stdDeviation="3" />
    </filter>
  </defs>
</svg>
<br/> <br/> <br/>
<img class="ie-only-blur" src="http://i.imgur.com/L4wrTJU.png" />
<br/> <br/> <br/>
<img class="css-blur" src="http://i.imgur.com/L4wrTJU.png" alt=""/>
<br/> <br/> <br/>
<img class="svg-only-blur" src="http://i.imgur.com/L4wrTJU.png" />
<br/> <br/> <br/>
<img class="all-blur" src="http://i.imgur.com/L4wrTJU.png" />

CSS

svg {
  position:absolute;
  left:-999px;
}

ie-only-blur {
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}

.css-blur {
  -webkit-filter: blur(3px); 
  -moz-filter: blur(3px);
  -ms-filter: blur(3px);
  -o-filter: blur(3px);
  filter: blur(3px);
}

.svg-only-blur {
  filter: url(#blur); 
}

.all-blur {
 -webkit-filter: blur(3px); 
 -moz-filter: blur(3px);
 -ms-filter: blur(3px);
 -o-filter: blur(3px);
 filter: blur(3px);
 filter: url(#blur);   
 filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}