Open In App

SVG <feGaussianBlur> Element

Improve
Improve
Like Article
Like
Save
Share
Report

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.
The <feGaussianBlur> element adds a smooth blur to the graphic based on the standard deviation provided in the input primitive.

Syntax:

<feGaussianBlur in="" stdDeviation="" edgeMode=""/> 

Attributes:

  • in: The in attribute identifies input for the given filter primitive.
  • stdDeviation: It defines the standard deviation for the smooth blur operation. The default value is 0.
  • edgeMode: It signifies the extra pixels at the edges of the input layer.

Example 1:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 1000 1000">
        <filter id="lightMe2">
  
            <feGaussianBlur in="FillPaint" 
                stdDeviation="10" edgeMode="wrap" />
  
            <feComposite in="SourceGraphic" 
                in2="light" operator="arithmetic" 
                k1="1" k2="0" k3="0" k4="0" />
  
        </filter>
        <rect x="20" y="20" width="200" 
            height="200" fill="green" 
            style="filter: url(#lightMe2);" />
    </svg>
</body>
  
</html>


Output:

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 1000 1000">
        <filter id="lightMe3" x="-50"
            y="-40" width="200" height="150">
              
            <feOffset in="BackgroundImage" 
                    dx="10" dy="10" />
  
            <feGaussianBlur in="offset2" 
                    stdDeviation="3" />
  
            <feMerge>
                <feMergeNode in="blur" />
                <feMergeNode in="SourceAlpha" />
            </feMerge>
  
        </filter>
        <rect x="20" y="20" width="200" 
            height="200" fill="green" 
            style="filter: url(#lightMe3);" />
    </svg>
</body>
  
</html>


Output:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads