SVG <feGaussianBlur> Element

Last Updated : 31 Mar, 2022

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:

HTML Introduction

epistler_999

Improve

Article Tags :

SVG <feGaussianBlur> Element

Similar Reads

Basics

HTML Structure & Elements

HTML List

HTML Visuals & Media

HTML Layout & Design

HTML Projects& Advanced Topics

HTML Tutorial References

Thank You!

What kind of Experience do you want to share?