<feGaussianBlur>

The <feGaussianBlur> tag is a primitive filter SVG that applies a Gaussian blur effect to a graphic element.

This effect is useful for creating soft edges, transitions, or simply blurring objects to draw attention to other elements.

Structure and syntax of the <feGaussianBlur> tag

Structure

This tag is always used with the <svg> tag.

Here is a basic example:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="blurEffect">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
    </defs>

    <circle cx="100" cy="100" r="50" fill="blue" filter="url(#blurEffect)" />
</svg>

In this example:

• The <feGaussianBlur> tag applies a blur with a stdDeviation of 5.
• The filter is applied to the circle with filter="url(#blurEffect)" on the <circle> tag.

Here is the result:

Advanced example

Here is an example combining multiple filters to achieve a blur and shadow effect:

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="complexBlur">
            <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
            <feOffset in="blur" dx="5" dy="5" result="offsetBlur" />
            <feMerge>
                <feMergeNode in="offsetBlur" />
                <feMergeNode in="SourceGraphic" />
            </feMerge>
        </filter>
    </defs>

    <rect x="50" y="50" width="100" height="100" fill="orange" filter="url(#complexBlur)" />
</svg>

In this example:

• <feGaussianBlur> creates a blur from the alpha of the source;
• <feOffset> offsets the blur to simulate a shadow;
• <feMerge> combines the blur and the source graphic.

Try it yourself:

Attributes of the <feGaussianBlur> tag

The <feGaussianBlur> tag accepts several attributes:

Best practices

To use <feGaussianBlur> effectively, avoid excessively high values of stdDeviation to prevent overly intense or subtle blurs.

Do not hesitate to combine <feGaussianBlur> with other primitives for advanced visual effects: filters can accumulate in their filter tag! 😉

Browser compatibility

The <feGaussianBlur> tag is widely supported by modern browsers: