Blur using SVG

by Roberto Apasajja

HTML

<div class='aaa'>

  <svg width="450" height="100" viewBox="0 0 450 100" style="position: absolute; top: 0;">
    <defs>
      <filter id="blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
      </filter>
    </defs>
    <image filter="url(#blur)" xlink:href="http://lorempixel.com/450/300/sports" x="0" y="0" height="300px" width="450px" />
  </svg>

</div>

CSS

.aaa{
  height:900px;
  background: url(http://lorempixel.com/450/300/sports);
  
}