Skip to content
SVG

Filters

Blur, shadow, and other effects.

#filter#blur#shadow

Code

svg
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="120">
  <defs>
    <filter id="blur" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
    </filter>
    <filter id="shadow">
      <feDropShadow dx="4" dy="4" stdDeviation="3" flood-opacity="0.5"/>
    </filter>
  </defs>
  <circle cx="50" cy="60" r="30" fill="red" filter="url(#blur)"/>
  <rect x="100" y="30" width="60" height="60" fill="blue" filter="url(#shadow)"/>
</svg>
All snippets