About

Spatial blurring is a low-pass filter operation that attenuates high-frequency components in a raster image. A miscalculated kernel radius or an inappropriate algorithm choice produces either imperceptible smoothing or destructive loss of structural detail. This tool implements three distinct convolution strategies - Box, Gaussian (approximated via 3-pass box accumulation per the Central Limit Theorem), and Stack Blur (Klingemann's weighted-stack method) - operating on raw RGBA pixel buffers inside a Web Worker. All computation runs client-side; no image data leaves your device. Note: processing time scales with pixel count. A 4000×3000 image at radius r = 50 may take several seconds depending on hardware.

Formulas

The Box Blur computes each output pixel as the arithmetic mean of all pixels within a square kernel of side 2r + 1:

P_out = 1(2r + 1)² r∑i=−r r∑j=−r P(x + i, y + j)

For separable implementation (used here), horizontal and vertical passes are applied independently, reducing cost from O(r²) to O(1) per pixel via a running accumulator.

Gaussian approximation via repeated box blur uses box widths computed as:

w_ideal = √12σ²n + 1

where σ = blur radius, n = 3 passes. The ideal width is rounded down to the nearest odd integer. Remaining error is distributed by using a slightly larger box on some passes.

Stack Blur maintains a weighted stack of 2r + 1 entries where the center pixel has weight r + 1 and weights decrease linearly to 1 at the edges. The divisor for normalization is:

D = (r + 1)²

where r = blur radius, P_out = output pixel value, P(x,y) = input pixel at coordinates (x,y), n = number of box blur passes, D = stack blur divisor.

Reference Data

Algorithm	Kernel Type	Passes	Per-Pixel Cost	Quality	Best For
Box Blur	Uniform average	2 (H + V)	O(1) with accumulator	Low - visible banding	Fast preview, thumbnails
Gaussian (3×Box)	Approximated Gaussian	6 (3×H + 3×V)	O(1) per pass	High - smooth falloff	Photography, UI backgrounds
Stack Blur	Weighted stack	2 (H + V)	O(1) via stack	High - near Gaussian	Real-time effects, large radii
True Gaussian	Exact kernel convolution	2 (H + V)	O(r)	Perfect	Scientific imaging (not implemented here)
Comparison assumes separable 2D decomposition
Common Blur Radii & Use Cases
Radius 1 - 3	Noise reduction, subtle smoothing for icons and UI elements
Radius 4 - 10	Portrait skin softening, mild depth-of-field simulation
Radius 11 - 25	Background blur for text overlays, privacy masking
Radius 26 - 50	Heavy bokeh effect, frosted glass UI backgrounds
Radius 51 - 100	Color palette extraction, extreme abstraction, ambient light maps
Image Format Export Characteristics
PNG	Lossless		Largest file size, preserves alpha channel
JPEG	Lossy (quality adjustable)		Smallest file, no alpha, artifacts at low quality
WebP	Lossy/Lossless		Modern browsers only, excellent compression

Frequently Asked Questions

Three successive box blur passes converge toward a Gaussian distribution by the Central Limit Theorem, but the approximation is imperfect. The tails of the distribution are slightly truncated compared to a true Gaussian kernel, which extends to ±3σ. For most photographic and UI applications this difference is imperceptible. True Gaussian convolution with an explicit kernel is computationally expensive at O(r) per pixel per axis and is not implemented here.

Photoshop's Gaussian Blur radius corresponds approximately to 2σ. A Photoshop radius of 10 px ≈ σ = 5. This tool uses the radius directly as the σ input to the box-size formula, so a radius of 10 here produces slightly different results than Photoshop's radius 10. For equivalent output, use roughly half the Photoshop radius value.

Possibly. A single RGBA ImageData buffer for an 8000 × 6000 image consumes approximately 192 MB of memory. The blur algorithm requires at least one additional buffer of the same size. Browsers typically limit per-tab memory to 1-4 GB. Images under 20 megapixels (roughly 5000 × 4000) are safe on most devices. The tool displays a warning for images exceeding 20 MP.

Yes. All three algorithms process all four RGBA channels independently. Alpha values are blurred identically to color channels, which means semi-transparent edges will spread outward. If you need pre-multiplied alpha handling (common in compositing pipelines), you would need to pre-multiply before blur and un-premultiply after - this tool does not perform that step automatically.

A box kernel assigns equal weight to all pixels within the window, creating a flat frequency response with sharp cutoff. This produces ringing artifacts (Gibbs phenomenon) visible as banding at radius values above approximately 15. Gaussian weighting tapers smoothly, eliminating the sharp cutoff. Stack Blur's triangular weighting sits between the two in quality.

This tool applies the blur uniformly to the entire image. Region-based blurring would require a mask or selection tool, which is beyond the scope of this single-purpose utility. For selective blur, export the full blur result and composite it with the original using a mask in an image editor.