SVG <feGaussianBlur> Element

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:

SVG <feGaussianBlur> Element

Explore