SVG feGaussianBlur Filter for Blur Effects

This article provides an overview of the SVG <feGaussianBlur> filter element, explaining how it functions to create soft-focus and blur effects on vector graphics, HTML elements, and text. You will learn the core mechanism behind the Gaussian blur algorithm in SVG, its critical attributes such as stdDeviation and in, practical implementation methods, and performance considerations for web design.

What is the feGaussianBlur Element?

The <feGaussianBlur> element is an SVG filter primitive used inside a <filter> container. Its primary function is to apply a Gaussian blur to an input image or vector graphic. A Gaussian blur uses a mathematical normal distribution (bell curve) to calculate the transformation of each pixel, resulting in a smooth, natural-looking defocus effect across shapes, lines, and text.

Core Attributes of feGaussianBlur

To control how the blur is applied and rendered, <feGaussianBlur> relies on several key attributes:

• stdDeviation: Defines the intensity or radius of the blur. It represents the standard deviation for the Gaussian kernel.
  • A single value (e.g., stdDeviation="5") applies the same blur radius along both the X and Y axes.
  • Two values separated by a space or comma (e.g., stdDeviation="10 2") allow directional blurring, applying different blur amounts horizontally and vertically.
• in: Specifies the input for the filter primitive. Common values include:
  • SourceGraphic: Blurs the original element with its full colors.
  • SourceAlpha: Blurs only the alpha channel (opacity mask), which is commonly used to construct custom drop shadows.
• result: Assigns a reference name to the output of this filter step, allowing other filter primitives within the same <filter> element to use the blurred output for further processing.

Basic Implementation Example

To apply <feGaussianBlur>, define the filter in the <defs> section of your SVG and reference its id using the filter attribute on the target graphic element:

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Define the blur filter -->
    <filter id="gaussian-blur-example">
      <feGaussianBlur in="SourceGraphic" stdDeviation="6" />
    </filter>
  </defs>

  <!-- Apply the filter to a rectangle -->
  <rect x="50" y="50" width="200" height="100" fill="#007acc" filter="url(#gaussian-blur-example)" />
</svg>

Common Use Cases

1. Drop Shadows and Glows: When combined with <feOffset> and <feMerge>, blurred alpha channels create realistic depth and neon glow effects.
2. Depth of Field: Applying selective blurring to background vectors creates a simulated camera focus within digital illustrations.
3. UI Background Effects: Blurring vector backdrops provides modern frosted-glass effects without relying on external raster images.

Performance Considerations

Rendering Gaussian blurs requires real-time pixel computation by the browser’s graphics processor. High stdDeviation values and applying filters to complex, animated paths can cause frame rate drops on lower-powered devices. To maintain optimal performance, keep blur radiuses moderate and limit the use of dynamic blur filters on actively moving elements.