Why this matters
There is an important distinction between a CSS `filter: blur()` and a real pixel-level blur. A CSS blur is a rendering hint that tells the browser to apply a Gaussian-like blur at display time, but the underlying image data remains sharp. If someone inspects the page or downloads the original image file, they get the unblurred version. A real blur, by contrast, modifies the actual pixel values so that every exported file contains the blur baked into the data permanently.
This tool implements a two-pass separable box blur, which is a standard image-processing technique. In the first pass, it averages each pixel with its horizontal neighbors within the radius. In the second pass, it averages each pixel with its vertical neighbors. Separating the blur into two one-dimensional passes reduces the computational complexity from O(radius squared) per pixel to O(radius times two), which is why the slider can update the preview in real time even at larger radius values. The result is a uniform, even blur that smooths out fine details while preserving the overall color distribution of the image.
The practical value of a real blur is anonymization. When you need to share a photo but protect faces, license plates, or sensitive text, a baked-in blur ensures that no amount of image inspection can recover the original detail. The tool exports in both PNG and JPG formats, so you can choose lossless quality or smaller file size depending on your needs.
Reference table
| Feature | Detail |
|---|---|
| Algorithm | Two-pass separable box blur (horizontal then vertical) |
| Radius range | 1 to 20 pixels |
| Preview size | Downscaled to 360px max for responsive slider interaction |
| Export size | Full original resolution |
| Export formats | PNG and JPG |
| Blur type | Real pixel modification, not a CSS display filter |
How to use it
Drop an image onto the upload zone or click to select a file from your device.
Drag the radius slider to set the blur strength from 1px (subtle softening) to 20px (heavy blur).
The preview updates in real time as you adjust the slider, using a downscaled version for speed.
Click 'Blur and download' to process the image at full resolution and save the result.
Testing your result
After downloading the blurred image, open it in an image editor and zoom in to 200 percent or more. You should see that the individual pixel values have been averaged with their neighbors — there should be no sharp edges remaining at the blur radius you selected. Compare the file size of the exported image to the original; a heavily blurred image in PNG format will often be larger because the lossless compression has a harder time with smooth gradients. If you need a smaller file, re-export as JPG. Verify that the blur is truly baked in by opening the downloaded file in a new browser tab without any CSS filters applied.
Common mistakes
Confusing this tool with a CSS blur filter and expecting the original image to be recoverable from the output file.
Using a very small radius like 1px and expecting a dramatic effect; box blur at 1px is quite subtle.
Assuming the preview resolution matches the export resolution; the preview is capped at 360px for performance.
Applying a heavy blur and then trying to sharpen the result in another tool, which cannot recover lost detail.
Edge cases and options
The two-pass separable approach means the blur is isotropic — it affects horizontal and vertical directions equally, producing a circular blur kernel. At a radius of 20px, fine text becomes completely unreadable and small faces are unrecognizable, which makes this setting ideal for full-image anonymization. The tool does not currently support selective or region-based blurring, so if you need to blur only a face or license plate while keeping the rest of the image sharp, you would need to crop the region first, blur it separately, and then composite it back. The export always runs at the original image resolution regardless of the downscaled preview.
Real-world use cases
Anonymizing faces or identifying information in photos before sharing them publicly or in documentation.
Creating blurred background images for website hero sections or presentation slides.
Softening product photos to reduce visual noise and draw attention to a foreground element.
Preparing images for use in thumbnails where fine detail would be invisible anyway.
Frequently asked questions
Q: Is this a CSS filter or a real blur?
A: Real — the algorithm walks each pixel and averages its neighbors in two passes (horizontal + vertical). The exported file has the blur baked into the pixel data.
Q: Why is the preview smaller than the export?
A: For speed. The preview is downscaled to 360px max so the slider stays responsive; the final export runs at full resolution.
Q: Can I blur only part of the image?
A: Not in this version. For selective blur (faces, license plates), use a masking tool — but for full-image anonymization, this works perfectly.
Q: What image formats are accepted as input?
A: Any format the browser can decode, which includes PNG, JPG, WebP, GIF, BMP, and AVIF in modern browsers.
Q: Is my image uploaded?
A: No. Blurring happens entirely in your browser.
Start using it now
Try the Image Blur tool. See also Image Filters and Photo Editor.
