CodePen

HTML

            
              <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="">

<!-- SVG Blur Filter -->
<!-- 'stdDeviation' is the blur amount applied -->
<svg id="svg-filter">
  <filter id="svg-blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur>
  </filter>
</svg>
            
          
!

CSS

            
              #svg-filter { display: none; }

img { display: block; width: 90%; }

img {
  -webkit-filter: url(#svg-blur);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................