Open In App

SVG Blur Effects

Improve
Improve
Like Article
Like
Save
Share
Report

The SVG <feGaussianBlur> element is used to create blur effects:

Syntax:

<feGaussianBlur in="SourceGraphic" stdDeviation="5" />

Attributes:

  • in: It is used to identifies input for the given filter primitive.
  • stdDeviation: It is used to defines the standard deviation for the blur operation.
  • edgeMode: It is used to determines how to extend the input image as necessary with color values.

Example:




<!DOCTYPE html>
<html>
<body>
  
<svg height="400" width="400">
  <defs>
    <filter id="gfgid" x="0.5" y="0.5">
      <feGaussianBlur in="SourceGraphic"
                      stdDeviation="10" />
    </filter>
  </defs>
  
  <rect width="120" height="120"
        stroke="green" stroke-width="4"
        fill="green" filter="url(#gfgid)" />
</svg>
  
</body>
</html>


Output:

Example: Customize blurry circle.




<!DOCTYPE html>
<html>
<body>
  
<svg height="400" width="400">
  <defs>
    <filter id="gfgid" x="0" y="0">
      <feGaussianBlur in="SourceGraphic"
                      stdDeviation="05" />
    </filter>
  </defs>
  
        <circle cx="40" cy="40" r="50"
                stroke="black" stroke-width="2"
                fill="grey" filter="url(#gfgid)"/> 
  </svg>
  
</body>
</html>


Output:



Last Updated : 17 Aug, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads