SVG Blur Effects - Learn HTML

This page covers how to blur SVG graphics with the <feGaussianBlur> filter primitive: how to control the blur amount, how to blur only the shape's silhouette, how to size the filter region so the blur isn't clipped, and when to reach for the simpler CSS filter: blur() instead.

Description of SVG filters

All SVG filters are defined inside a <defs> element. The <defs> element is short for definitions. It holds reusable pieces — like filters — that are not drawn until something references them.

The <filter> element defines an SVG filter. It needs an id attribute (required) that identifies the filter. The <filter> element is not rendered directly: it only takes effect when referenced through the filter attribute on an SVG shape, or through the url() function in CSS.

Each <filter> contains one or more filter primitives as children. A filter primitive performs one graphical operation on one or more inputs and produces a single output. Besides taking the output of another primitive as input, a primitive can also accept built-in inputs such as SourceGraphic and SourceAlpha.

Every filter primitive uses the fe prefix, which stands for "filter effect". There are 17 filter primitives defined in the SVG Filter specification. To blur an element we use <feGaussianBlur>.

Example of creating a blur effect:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="150" height="150">
      <defs>
        <filter id="filter" x="0" y="0">
          <feGaussianBlur in="SourceGraphic" stdDeviation="20" />
        </filter>
      </defs>
      <rect width="110" height="110" stroke="green" stroke-width="5" fill="lightblue" filter="url(#filter)" /> 
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Try it Yourself »

Code explanation:

The <filter> element's id attribute specifies a unique name for the filter.
The blur effect is produced by the <feGaussianBlur> element.
in="SourceGraphic" feeds the whole shape — colors and all — into the blur.
stdDeviation sets how strong the blur is.
The <rect> element's filter attribute links the shape to the filter by its id.

The stdDeviation attribute

stdDeviation controls the amount of blur. It is the standard deviation of the Gaussian function applied to the pixels — in plain terms, a larger number spreads each pixel over a wider area, so the image looks softer. 0 means no blur at all.

You can pass one value for a uniform blur, or two space-separated values for an asymmetric blur where the X and Y axes are blurred by different amounts:

<!-- Uniform blur in both directions -->
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />

<!-- 20px of horizontal blur, 5px of vertical blur (motion-blur look) -->
<feGaussianBlur in="SourceGraphic" stdDeviation="20 5" />

Typical values are small: 1–3 gives a gentle softening, 5–10 a clearly blurry result, and anything above ~20 makes the shape almost unrecognizable. Because the blur grows in every direction, it spills outside the shape's original bounds — which is why the filter region matters (see below).

SourceGraphic vs SourceAlpha

The in attribute chooses what the primitive operates on. The two built-in source inputs behave very differently:

in="SourceGraphic" — the element exactly as drawn, including its fill, stroke, and colors. Blurring this gives a soft, full-color copy of the shape.
in="SourceAlpha" — only the alpha (opacity) channel of the element. The color information is discarded, leaving a solid black silhouette of the shape. Blurring this is the basis of drop shadows, since you want a colorless blurred outline you can offset behind the original. See SVG drop shadows for that pattern.

<!-- Soft, full-color blur -->
<feGaussianBlur in="SourceGraphic" stdDeviation="6" />

<!-- Blurred black silhouette (colors removed) -->
<feGaussianBlur in="SourceAlpha" stdDeviation="6" />

The filter region (x, y, width, height)

A <filter> has a clipping region. By default it is x="-10%" y="-10%" width="120%" height="120%" of the element's bounding box — a 10% margin on each side. A heavy blur can easily spread past that margin, and anything outside the region is cut off with a hard edge, which looks like the blur was abruptly chopped.

The x, y, width, and height attributes on <filter> set this region. In the first example, x="0" y="0" shifts the region's top-left corner to the element's origin. To give a strong blur room to fade out smoothly, enlarge the region:

<filter id="soft" x="-20%" y="-20%" width="140%" height="140%">
  <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>

If a blur looks clipped on one side, the filter region is usually too small — widen it.

Chaining primitives with result

When a filter has several primitives, the result attribute names a primitive's output so a later primitive can reference it through in. This is how multi-step effects (blur, then offset, then merge) are wired together:

<filter id="chain">
  <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blurred" />
  <feOffset in="blurred" dx="3" dy="3" />
</filter>

Here feGaussianBlur stores its blurred silhouette as blurred, and feOffset reads it back with in="blurred". Without result/in plumbing, each primitive would just blur the original source again.

Blurring an image and text

<feGaussianBlur> works on any SVG content, not just rectangles. Below, the same filter blurs an embedded image and a line of text. The filter region is enlarged so the blur doesn't get clipped at the edges.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="320" height="240">
      <defs>
        <filter id="blurFilter" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur in="SourceGraphic" stdDeviation="4" />
        </filter>
      </defs>
      <image
        href="https://www.w3docs.com/build/assets/images/logo.svg"
        width="180" height="60" x="20" y="20"
        filter="url(#blurFilter)" />
      <text x="20" y="160" font-size="40" fill="navy" filter="url(#blurFilter)">
        Blurred text
      </text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

The CSS filter: blur() alternative

For a quick blur on an HTML element (or a whole SVG), CSS offers the much simpler filter: blur() function:

img {
  filter: blur(4px);
}

filter: blur() takes a single length and applies a uniform Gaussian blur — it's the easiest choice when you just need to soften an element. Prefer the SVG <feGaussianBlur> approach when you need:

Asymmetric blur (different X and Y amounts via stdDeviation="20 5").
To blur only the silhouette (in="SourceAlpha").
To chain blur with other primitives — offsets, color shifts, merges — for effects like drop shadows.
A reusable, named filter referenced from multiple shapes.

For a full list of filter primitives and attributes, see the SVG reference.

Practice

What are the functions of stdDeviation and in attributes in SVG 'feGaussianBlur' filter?

The stdDeviation attribute defines the standard deviation for the blur operation.The in attribute defines the input for the filter.The stdDeviation attribute is used to specify the radius of the filter.The in attribute assigns the color to the filter.The stdDeviation and in attributes have no specific function in SVG 'feGaussianBlur' filter.