Url Css Filter

by Ananda Projapati

HTML

<h2>
Url Filter
</h2>
<figure>
  <img src="http://www.designtheway.com/wp-content/uploads/artistic-bright-color-colored-42226.jpeg" />
</figure>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="filter" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="10" dy="10" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
</svg>

CSS

figure img {
  -webkit-filter:url('#filter');
  filter: url('#filter');
}