Firefox Tomorrow

svg element

<feGaussianBlur>

View on MDN ↗

The <feGaussianBlur> SVG filter primitive blurs the input image by the amount specified in stdDeviation, which defines the bell-curve.

Like other filter primitives, it handles color components in the linearRGB color space by default. You can use color-interpolation-filters to use sRGB instead.

A Gaussian blur can extend beyond the bounds of the input image. The <filter> element’s x, y, width, and height attributes define the filter region within which the blurred output is rendered; pixels outside this region are clipped. By default, x and y are -10% and width and height are 120%, providing a margin for the blur to spread. For larger stdDeviation values, expand the filter region further. For example:

<filter x="-30%" y="-30%" width="160%" height="160%">

Usage context

Attributes

DOM Interface

This element implements the SVGFEGaussianBlurElement interface.

Example

Basic example

SVG

<svg
  width="230"
  height="120"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <circle cx="60" cy="60" r="50" fill="green" />

  <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)" />
</svg>

Result

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Drop shadow example

SVG

<svg
  width="120"
  height="120"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="dropShadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
    <feOffset dx="2" dy="4" />
    <feMerge>
      <feMergeNode />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>

  <circle cx="60" cy="60" r="50" fill="green" filter="url(#dropShadow)" />
</svg>

Result

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also