How does increasing the stdDeviation value of affect the result?

It increases the amount of blur, spreading pixels further

It decreases the blur, sharpening the edges instead

It only affects blur along the horizontal axis

Besides using an SVG filter with feGaussianBlur, how else can an SVG element be blurred with CSS?

Apply the CSS filter property with a blur() function, e.g. filter: blur(5px)

Blurring can only be achieved through SVG filter primitives; CSS has no blur equivalent

Set the opacity property to a fractional value to simulate blur

What does the edgeMode attribute on control?

How pixels outside the input's edges are treated when computing the blur

Whether the blur applies only to the stroke and not the fill

The background color shown behind the blurred region

SVG Blur Effects

Explore feGaussianBlur in depth — the filter primitive that creates soft, out-of-focus blur effects, shadows, and glows in SVG.

#Jobseeker

Find matching jobs & Auto apply with AI

Jobseeker using Hyring to search, apply, and prepare with AI

The feGaussianBlur Primitive

feGaussianBlur is the most commonly used filter primitive, and it blurs its input using a Gaussian smoothing function controlled by the stdDeviation attribute. A larger stdDeviation spreads each pixel's color further into its neighbors, producing a stronger blur; a value near zero leaves the image essentially unchanged. It is typically placed inside a <filter> and applied to a shape with the filter="url(#id)" attribute.

A Basic Blur

<!DOCTYPE html>
<html>
<body>

<svg width="240" height="100" viewBox="0 0 240 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="blurLight"><feGaussianBlur stdDeviation="2" /></filter>
    <filter id="blurHeavy"><feGaussianBlur stdDeviation="8" /></filter>
  </defs>
  <circle cx="60" cy="50" r="35" fill="crimson" filter="url(#blurLight)" />
  <circle cx="170" cy="50" r="35" fill="crimson" filter="url(#blurHeavy)" />
</svg>

</body>
</html>

Controlling Blur Strength with stdDeviation

stdDeviation accepts either a single number, which blurs evenly in both the horizontal and vertical directions, or two space-separated numbers meaning stdDeviation="x y", which blurs each axis independently. Giving the two axes very different values produces a directional, motion-blur-like streak instead of a uniform soft-focus effect.

Directional Motion Blur

<!DOCTYPE html>
<html>
<body>

<svg width="220" height="100" viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="motionBlur" x="-50%" width="200%">
      <feGaussianBlur stdDeviation="12 1" />
    </filter>
  </defs>
  <rect x="60" y="35" width="100" height="30" fill="#333" filter="url(#motionBlur)" />
</svg>

</body>
</html>

Soft Shadows and Glows with Blur

feGaussianBlur rarely works alone in production filters — it is usually the first step in a chain. Pair it with feOffset and feMerge to build a soft drop shadow, or with feFlood and feComposite to build a colored glow that sits behind the original shape. The edgeMode attribute controls how the blur treats pixels at the very edge of the filter region: duplicate repeats the edge pixels outward (avoiding dark fringes), wrap tiles the image, and none (the default) treats anything outside the region as transparent.

stdDeviation="3" — a light blur, subtle softening of edges
stdDeviation="10" — a heavy blur, a dreamy soft-focus look
stdDeviation="12 1" — a directional blur stretched along one axis
edgeMode="duplicate" — extends edge pixels to avoid dark blur fringes at the boundary
feGaussianBlur + feOffset + feMerge — the standard recipe for a soft drop shadow
feGaussianBlur + feFlood + feComposite — the standard recipe for a colored glow halo

A Colored Glow Effect

<!DOCTYPE html>
<html>
<body>

<svg width="200" height="140" viewBox="0 0 200 140" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="glow" x="-60%" y="-60%" width="220%" height="220%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="6" result="blurredAlpha" />
      <feFlood flood-color="dodgerblue" result="glowColor" />
      <feComposite in="glowColor" in2="blurredAlpha" operator="in" result="coloredGlow" />
      <feMerge>
        <feMergeNode in="coloredGlow" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <circle cx="100" cy="70" r="35" fill="white" stroke="#222" stroke-width="2" filter="url(#glow)" />
</svg>

</body>
</html>

Note: Precompute filters wherever possible rather than animating stdDeviation itself — animating blur radius forces the browser to recompute the whole convolution every frame, which is far more expensive than animating opacity or transform.

Note: Because blur spreads a shape's pixels beyond its original edges, always widen the enclosing <filter> element's x/y/width/height (or leave the default -10%/120% region) — otherwise the soft edges of the blur get hard-clipped at the filter region boundary, leaving a visible cutoff line.

Attribute	Purpose
stdDeviation	Sets blur strength; one value blurs evenly, two values blur x and y independently
in	Names the input this primitive should read, such as SourceGraphic or SourceAlpha
edgeMode	Controls how pixels at the filter region's edge are treated: duplicate, wrap, or none
result	Names this primitive's output so later primitives can reference it via in
x / y / width / height (on <filter>)	Defines the filter region so blurred edges have room to spread without clipping

Exercise: SVG Blur Effects

Which filter primitive is used to create a blur effect in SVG?

Keep Going

SVG Interview QuestionsPractice real questions asked for SVG Frontend Developer SalarySee what Frontend Developer roles pay in the market Auto Apply for JobsApply to open roles related to SVG and tweak your resume