Gaussian Blur

What is Gaussian blur?

Gaussian blur softens an image by replacing every pixel with a weighted average of the pixels around it, where the weights follow a bell curve. Close neighbors count a lot, distant ones barely at all, and the effect looks the same in every direction.

The bell curve is the normal distribution, named after Carl Friedrich Gauss, who used it in 1809 to describe errors in astronomical measurements. Two centuries later the same formula sits behind the blur slider in nearly every photo editor, in CSS and in phone camera software.

Why is the Gaussian the default blur?

A box blur, which weights all neighbors equally, is simpler and faster, but it leaves square-ish artifacts and can make a bright point look like a little square. A Gaussian has no edges to its kernel, so a point becomes a soft round glow, which is closer to what an out-of-focus lens or a foggy window does.

It also has a property image scientists care about. Blurring with a Gaussian never creates new detail: you won't get a ring, a peak or a dark band that wasn't already there. In the 1980s, researchers working on scale-space theory showed that the Gaussian is the only kernel that behaves that way, which is why computer vision uses it to look at an image at many scales at once.

The math has a practical side too. A Gaussian splits into one pass across and one pass down that give exactly the same result as the full square, and blurring twice equals one bigger blur. Repeat a box blur three times and the result is already very close to a Gaussian, a shortcut the SVG and CSS filter specification allows browsers to use.

Radius, sigma and why numbers don't match

Every program labels the strength differently, so 10 in one app isn't 10 in another. The real parameter is sigma, the standard deviation of the bell curve. About 68 percent of the weight falls within one sigma of the center and 99.7 percent within three, so programs usually stop sampling around three sigma.

CSS is explicit about it: the value inside filter: blur() is sigma itself, in pixels, and the specification warns it isn't the same as a box-shadow's blur radius. Other apps call their slider radius and map it to sigma with their own factor. If you need to match a blur between two tools, compare a test image side by side and adjust by eye.

What Gaussian blur is used for

Beyond softening backgrounds, it's a building block. An unsharp mask subtracts a Gaussian-blurred copy to sharpen edges. Bloom and glow effects blur only the bright parts and add them back. Edge detectors subtract two Gaussians of different sizes, and frosted interface panels blur whatever scrolls behind them.

Trying it on your own picture

Blur Image applies a Gaussian blur to a photo or a video, across the frame or inside a mask. Radius 2 takes the edge off noise, while 15 leaves only shapes and colors. To blur by distance instead, Tilt Shift Effect grows the blur away from a sharp band you place.

Further reading

• Filter Effects Module Level 1 (W3C)