JSFiddle - React, Tailwind, and code Playground

by cancerbero_sgx

HTML

<div class="svg-only-blur">
    <h1>atitle</h1>
    <p> here is some text</p>
    <img src="http://www.frontendwebhelp.com/html-css-tips-tricks/img/ie-misc-shapes-transparent.png"></p>
    <p>kjla sdhkfjahsk djfh</p>
</div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="3" />
   </filter>
</svg>

CSS

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