How to Blur an Image Online: Gaussian, Box, and Stack Blur

What Is Image Blur?

Image blur is a fundamental image processing operation that reduces detail and sharpness by averaging pixel values with their neighbors. Every pixel in the output becomes a weighted combination of surrounding pixels, smoothing out fine details, edges, and noise.

Blur isn't just about making things look out of focus. It's one of the most versatile tools in image processing, used for everything from noise reduction and privacy protection to creating depth-of-field effects and artistic backgrounds.

How Blur Works: The Convolution Kernel

At its core, every blur operation uses a convolution kernel (also called a filter matrix). This is a small grid of numbers that slides across your image pixel by pixel. At each position, the kernel multiplies its values with the underlying pixel values, sums the results, and writes the output.

For example, a simple 3x3 averaging kernel looks like this:

1/9  1/9  1/9
1/9  1/9  1/9
1/9  1/9  1/9

Each output pixel becomes the average of itself and its 8 immediate neighbors. Larger kernels (5x5, 7x7, 15x15) include more neighbors and produce stronger blur.

The type of blur depends entirely on the kernel's values and how they're distributed.

Types of Blur Algorithms

Gaussian Blur

Gaussian blur is the gold standard of image blurring. It uses a kernel whose values follow a Gaussian (bell curve) distribution, meaning center pixels contribute more than edge pixels.

How it works:

The kernel values are calculated from the 2D Gaussian function:

G(x, y) = (1 / 2pisigma^2) * e^(-(x^2 + y^2) / 2*sigma^2)

The sigma parameter controls blur strength. Higher sigma = wider bell curve = stronger blur.

Key properties:

• Produces the most natural-looking blur
• Rotationally symmetric (blurs equally in all directions)
• Separable: a 2D Gaussian can be split into two 1D passes (horizontal then vertical), making it much faster for large radii
• No ringing or edge artifacts
• Used by cameras to simulate depth of field

When to use Gaussian blur:

• Portrait background softening
• Noise reduction (pre-processing for edge detection)
• Creating bokeh or depth-of-field effects
• Smooth, professional-looking blur for any purpose

Box Blur

Box blur is the simplest blur algorithm. Every pixel in the kernel has equal weight, making the output pixel a straight average of the surrounding area.

How it works:

For a 5x5 box blur, each output pixel is the average of 25 surrounding pixels, all weighted equally.

Key properties:

• Fastest blur algorithm (especially with integral images / summed area tables)
• Can produce visible "boxy" artifacts on diagonal edges
• Not rotationally symmetric (blurs differently along axes vs. diagonals)
• Multiple passes of small box blur approximate Gaussian blur

When to use box blur:

• Real-time applications where speed matters more than quality
• Quick previews before applying a higher-quality blur
• When combined: three passes of box blur closely approximate Gaussian blur (this is actually how many "fast Gaussian" implementations work)
• Pixelation effects are essentially box blur with very large, non-overlapping blocks

Stack Blur

Stack blur is a clever approximation of Gaussian blur that's nearly as fast as box blur but produces much smoother results. Invented by Mario Klingemann, it uses a triangular (tent) filter that gives more weight to center pixels than edge pixels.

How it works:

Instead of a flat average (box) or a bell curve (Gaussian), stack blur uses a linearly decreasing weight from center to edge. It maintains a "stack" of pixel values and slides it across the image, adding new pixels at the leading edge and removing them at the trailing edge.

Key properties:

• Quality very close to Gaussian blur
• Speed very close to box blur
• O(1) per pixel regardless of radius (unlike true Gaussian which grows with kernel size)
• Ideal for interactive, real-time blur
• Used extensively in web and mobile applications

When to use stack blur:

• Interactive tools where users drag a slider to adjust blur
• Mobile and web applications needing smooth performance
• Any case where you need Gaussian-quality blur at box-blur speed

Comparison of Blur Algorithms

Algorithm	Quality	Speed	Kernel Shape	Best For
Gaussian	Excellent	Moderate	Bell curve	Professional editing, photography
Box	Good	Fastest	Flat/uniform	Real-time previews, pixelation
Stack	Very Good	Fast	Triangular	Web tools, interactive applications
Motion	Varies	Moderate	Directional line	Simulating movement
Radial	Varies	Slow	Radial pattern	Zoom/spin effects

Other Blur Types Worth Knowing

Motion Blur

Simulates the blur created by camera or subject movement. Uses a directional kernel (a line at a specific angle) rather than a circular one.

Use cases: Action photography simulation, speed effects, conveying movement in static images.

Radial Blur

Blurs pixels in a circular pattern around a center point, simulating zoom (in/out) or spin motion.

Use cases: Focus attention on center subject, dramatic zoom effects, spinning motion.

Bilateral Blur

An edge-preserving blur that smooths flat areas while keeping sharp edges intact. It considers both spatial distance and color similarity when averaging pixels.

Use cases: Skin smoothing in portraits (removes blemishes while keeping facial features sharp), noise reduction without losing detail.

Median Blur

Replaces each pixel with the median value of its neighborhood rather than the average. Extremely effective at removing "salt and pepper" noise while preserving edges.

Use cases: Noise removal, especially impulse noise. Often used as a preprocessing step before edge detection.

How to Blur an Image Online

Method 1: Free Online Blur Tool (Recommended)

The fastest way to blur any image without installing software:

1. Go to Blur Image
2. Upload your image (supports JPG, PNG, WebP, BMP)
3. Choose your blur type (Gaussian, box, or stack)
4. Adjust the blur radius with the slider
5. Preview the result in real time
6. Download the blurred image

All processing happens in your browser. Your image is never uploaded to a server, so it's completely private.

Method 2: Photoshop

1. Open your image in Photoshop
2. Duplicate the layer (Ctrl/Cmd + J) so you can compare before/after
3. Go to Filter > Blur > Gaussian Blur
4. Adjust the radius slider until you get the desired effect
5. Click OK

Pro tip: For selective blur (blur background but keep subject sharp), use Select Subject first, invert the selection, then apply blur only to the background.

Method 3: GIMP (Free Desktop Software)

1. Open your image in GIMP
2. Go to Filters > Blur > Gaussian Blur
3. Set the horizontal and vertical blur radius (keep them equal for uniform blur)
4. Choose IIR or RLE method (RLE is faster for large radii)
5. Click OK

GIMP also offers Pixelize, Motion Blur, and Median blur under the same Filters > Blur menu.

Method 4: CSS Blur (For Web Developers)

If you need to blur an image on a webpage without editing the file:

img.blurred {
  filter: blur(10px);
}

The CSS filter: blur() function applies Gaussian blur with the specified pixel radius. It's GPU-accelerated in modern browsers and works great for hover effects, background treatments, and loading states.

Practical Applications of Image Blur

Privacy and Censoring

Blur is the standard method for protecting privacy in images:

• Blurring faces in street photography
• Obscuring license plates, addresses, and personal information
• Redacting sensitive content in screenshots

For total privacy, use strong Gaussian blur (radius 20+) or pixelation, which is harder to reverse-engineer than smooth blur.

Background Blur (Bokeh Effect)

Simulating the shallow depth of field that expensive camera lenses produce:

1. Select your subject (the sharp area)
2. Invert the selection to get the background
3. Apply Gaussian blur to the background only

This makes the subject pop and creates a professional portrait look. Many phone cameras now do this automatically in "Portrait Mode."

Noise Reduction

Blur is the foundation of noise reduction:

• Apply gentle Gaussian blur (radius 1-3) to reduce high-frequency noise
• Use bilateral blur to reduce noise while keeping edges sharp
• For severe noise, try our noise tool to understand what noise is, then apply blur as the antidote

Creating Smooth Backgrounds and Textures

Need a smooth gradient background for a design?

1. Start with any colorful image
2. Apply heavy Gaussian blur (radius 50+)
3. The result is a smooth, organic gradient

This technique is widely used in web design, presentations, and social media graphics.

Pre-Processing for Other Effects

Many image effects use blur as a preprocessing step:

• Unsharp mask (sharpening) subtracts a blurred copy from the original
• Edge detection (Sobel, Canny) applies Gaussian blur first to reduce noise
• Bloom effects in games and photo editing blur bright areas and add them back
• Halftone and dithering effects benefit from slight pre-blur to reduce noise in the pattern

Blur Radius: How to Choose the Right Value

The blur radius (or sigma for Gaussian) controls how strong the blur is:

Radius	Effect	Typical Use
1-3 px	Subtle softening	Noise reduction, skin smoothing
5-10 px	Noticeable blur	Mild background blur, text readability behind overlays
15-25 px	Strong blur	Privacy censoring, dramatic depth of field
30-50 px	Heavy blur	Abstract backgrounds, strong bokeh
50+ px	Extreme blur	Gradient generation, completely abstract

Rule of thumb: Start low and increase. You can always blur more, but you can't un-blur an image (well, not easily, though AI deblurring is getting better).

Common Mistakes When Blurring Images

1. Blurring at low resolution then upscaling - Blur radius is resolution-dependent. A 5px blur on a 300px image is dramatic; on a 3000px image it's barely noticeable. Always blur at the final resolution.

2. Using box blur for final output - Box blur is fast but can show artifacts. Use Gaussian or stack blur for anything that will be published.

3. Over-blurring for privacy - Light blur can sometimes be reversed using deconvolution algorithms. For true privacy protection, use heavy blur (radius 20+) or pixelation.

4. Not using edge-aware blur for portraits - Standard Gaussian blur will blur edges too. Use bilateral blur or manual masking to keep important edges sharp.

5. Saving as JPEG after blurring - JPEG compression can add artifacts to the smooth gradients created by blur. Save as PNG for lossless quality, or use high-quality JPEG (90%+). You can check your output file quality with tools like Image Size Checker.

FAQ

What is the difference between Gaussian blur and regular blur?

"Regular blur" usually refers to box blur (simple averaging). Gaussian blur uses a bell-curve weighted kernel that produces smoother, more natural results without the boxy artifacts that simple averaging can create. Gaussian blur is the standard in professional image editing.

Can a blurred image be unblurred?

Partially. Deconvolution algorithms can reverse some blur if you know the exact blur kernel used. However, heavy blur permanently destroys high-frequency detail that cannot be recovered. For privacy purposes, use strong blur (radius 20+) or pixelation to ensure information cannot be recovered.

What blur radius should I use for background blur?

It depends on your image resolution and the effect you want. For a subtle bokeh effect on a 1920x1080 image, try 15-25 pixels. For strong background separation, try 30-50 pixels. Always preview before committing. Our free blur tool lets you adjust the radius with a real-time preview.

Is CSS blur the same as Gaussian blur?

Yes. The CSS filter: blur() property applies Gaussian blur. The value in parentheses is the blur radius in pixels. It's GPU-accelerated in all modern browsers and is an efficient way to blur images on the web without server-side processing.

How do I blur only part of an image?

In our online blur tool, you can apply blur to the entire image. For selective blur (blurring just the background or a specific region), you'll need Photoshop, GIMP, or a similar editor that supports selections and masks. Select the area you want to blur, then apply the blur filter to the selection only.

Summary

Blur is one of the most fundamental and versatile image processing operations. Whether you need Gaussian blur for professional photography, box blur for real-time applications, or stack blur for interactive web tools, understanding the differences helps you choose the right algorithm for your needs.

Try the free blur image tool to experiment with different blur types and radii on your own photos, or explore related effects like pixelation, noise, and grayscale conversion for more creative image processing.

Related tools:

• Blur Image - Apply Gaussian, box, or stack blur online
• Pixelate Image - Block-based mosaic blur effect
• Add Noise - Add film grain and noise effects
• Grayscale Converter - Convert images to grayscale
• Image Size Checker - Check image dimensions and file size