Is this a true Gaussian blur?

No, it's a box blur: a simpler, faster algorithm that averages pixels uniformly within a square window rather than weighting them by a bell-curve like a true Gaussian blur does. Visually it's a close approximation, especially at smaller radii, but a true Gaussian has slightly smoother falloff.

Does this blur affect transparency too?

Yes. All four channels (red, green, blue, and alpha) are blurred independently, so transparent edges soften along with the color content. If you only want to soften transparency and keep colors sharp, use the edges softener tool instead.

What does the radius control?

The radius sets how many pixels in each direction the blur samples from, so a larger radius produces a stronger, wider blur and a smaller radius produces a subtler softening.

Can color bleed through near transparent edges?

Yes, slightly — since this is an unweighted average of raw RGBA values, a fully transparent neighbor's arbitrary color values can bleed a little into a blurred edge, a well-known limitation of naive (non-premultiplied-alpha) box blurs.

PNG Blurrer - Apply a Box Blur to an Image Online

Overview

Introduction

This tool blurs a PNG image, entirely client-side, using a fast separable box blur applied to every color and transparency channel.

It's a simple, dependency-free way to soften an image without needing a full image-editing suite.

What Is PNG Blurrer?

A client-side PNG blur filter that applies a two-pass (horizontal then vertical) box blur independently to the red, green, blue, and alpha channels of every pixel.

The separable two-pass approach is a standard, efficient way to implement a 2D box blur without the cost of a full 2D convolution.

How PNG Blurrer Works

The tool first runs a horizontal pass, replacing each pixel's value in every channel with the average of its 2*radius+1 horizontal neighbors (clamped at the image edges), then runs a second, vertical pass over that intermediate result the same way.

Running the two 1D passes back to back produces the same result as a full 2D box blur at a fraction of the computational cost.

When To Use PNG Blurrer

Use it to soften a photo for a dreamy or out-of-focus look, reduce visible noise or JPEG-style artifacts, or create a blurred backdrop layer behind other content.

It's also a common step before further stylized processing, like generating a soft drop-shadow layer.

Often used alongside PNG Pixelator and PNG Edges Softener.

Features

Advantages

Runs entirely client-side; the uploaded image is never sent to a server.
Fast, thanks to the separable two-pass algorithm rather than a full 2D convolution.
Blurs all four channels consistently, so both color and transparency soften together.

Limitations

A box blur is a simpler approximation of a true Gaussian blur and can show a slightly more uniform/less natural falloff at larger radii.
Because it blurs raw (non-premultiplied) RGBA values, some color can bleed through near hard transparent edges.

Examples

Soften a photo for a dreamy effect

Input

A 800x600 photo, radius 4

Output

The same-size photo with a gentle, uniform soft-focus blur

A small-to-moderate radius softens detail while keeping the subject recognizable.

Create a strong blurred backdrop layer

Input

A 1200x800 photo, radius 25

Output

The same-size photo heavily blurred into soft color regions

Large radii are useful for creating an out-of-focus backdrop behind foreground content.

Best Practices & Notes

Best Practices

Start with a small radius (2-5px) for a subtle softening effect and increase gradually for a stronger blur.
If you only want to soften transparency and not the actual colors, use the dedicated edges softener tool instead of this general blur.

Developer Notes

blurPng is a pure lib function operating on a plain Uint8ClampedArray PixelBuffer: it runs a two-pass separable box blur (horizontal, then vertical) across all four RGBA channels with clamped edge sampling, using a Float32Array intermediate buffer for accuracy before rounding back to bytes — no DOM access until the component paints the result for preview/download.

PNG Blurrer Use Cases

Softening a photo for a dreamy or out-of-focus aesthetic
Creating a blurred backdrop layer behind foreground content
Reducing visible noise or fine texture in an image

Common Mistakes

Using a very large radius on a large image and expecting instant results; processing time scales with both the image size and the radius.
Expecting a true Gaussian falloff — this is a box blur, a faster but slightly less smooth approximation.

Tips

Combine with the pixelator tool for a two-step 'soft mosaic' style effect.
Use the edges softener tool instead if you specifically want to feather transparency without softening the colors.

PNG Blurrer