Blur image files only after deciding whether the goal is a visual mood or to obscure a specific detail. This page can soften the whole picture or one movable rectangular area, but the correct strength depends on what must no longer be readable in the exported file.
The tool accepts one JPG, PNG or WebP image up to 40 MB, 12,000 pixels per side and 20 million pixels. It preserves the source pixel dimensions, applies a blur radius from 2 to 40 pixels, and creates a new JPG, PNG or WebP file. It does not automatically detect faces, people, license plates, backgrounds or text.
Choose whole-image or selected-area blur
Use Whole image when every pixel should share the same soft treatment. Typical uses include creating a quiet background for text, reducing visual distraction or making a photograph feel less literal.
Use Selected area when the rest of the image should stay sharp. The preview displays one rectangular selection that can be dragged and resized from four corners. This is useful for a name, address, screen notification, face or background detail that occupies a clear rectangle.
The selected-area boundary is deliberate and hard. Pixels inside the rectangle use the blurred version; pixels outside remain unchanged. This makes the affected region predictable, but it does not feather the rectangle into the surrounding image. Inspect the boundary when the edit is aesthetic rather than functional.
This version handles one area per export. To blur several separate regions, create one result, load that result again and apply another area. Remember that every extra JPG or WebP save can add another lossy encoding step.
How to blur an image on this page
- Choose one image. Add a JPG, PNG or WebP file. The page reports its dimensions, format and bytes.
- Choose the coverage. Select Whole image or Selected area. In area mode, move and resize the rectangle directly over the preview.
- Set the radius. Start around 8–16 px for visible softening. Increase the value when the detail must become harder to recognize.
- Choose an output format. Keep PNG for lossless graphics or transparency. Use JPG or WebP when a photographic delivery file and adjustable quality are appropriate.
- Create and inspect. Open the full result, check the blurred content and boundary, compare the actual file size, and download only after the intended detail is no longer useful.
Changing a setting clears the previous result. That prevents a stale download from being confused with the settings currently visible in the form.
Choose a blur strength you can defend
The radius controls how far neighboring pixels blend. MDN documents the Canvas filter property's blur() function as a pixel length related to the Gaussian standard deviation: larger values blend information across a wider area.
A number is not a universal privacy score. A 10 px blur can be strong on a 400 px thumbnail and weak on a 6000 px camera image. Judge the generated file at its actual dimensions, not only the scaled preview.
Practical starting points:
| Goal | Starting radius | What to inspect |
|---|---|---|
| Gentle background softening | 4–10 px | Subject separation and edge quality |
| Hide a minor visual detail | 12–24 px | Whether shape, color and text remain inferable |
| Strong rectangular obscure | 24–40 px | Full-size readability and recognizable silhouettes |
These are editing suggestions, not guarantees. High-contrast text, QR codes, faces and familiar logos can remain recognizable even when fine detail is reduced. Increase the radius, enlarge the selected rectangle and inspect the output on a large screen.
Blur is not the same as secure redaction
Blur changes visible pixels, but it is still a softened representation of the original area. It can leave letter lengths, line structure, colors, outlines or facial shape. A weak blur may look hidden at thumbnail size while remaining understandable after zooming.
For sensitive documents, passwords, access tokens, financial identifiers or exact addresses, prefer an opaque cover, cropping or permanent pixel removal in a workflow designed for redaction. Keep the original private and test the exported copy independently.
Also check the rest of the file. Blurring one region does not remove identifying details elsewhere, and visible pixels are not the only possible information in an image. This Canvas export does not copy the source metadata, but users should still inspect the generated file when the original came from a camera or phone.
Why blurred edges need extra pixels
Applying a blur directly to the edge of a transparent Canvas can mix real image pixels with transparent pixels outside the canvas. The result may show a dark or translucent border.
This tool extends the outermost source pixels into a temporary padded canvas before applying the filter. It then crops the blurred result back to the original dimensions. The process is designed to keep the edge visually continuous instead of fading into transparency.
The extra padded and blurred canvases use memory. That is why this page limits input to 20 million pixels even though several simpler base97 tools allow larger images. The limit is an implementation boundary, not a statement about the image format.
MDN currently marks CanvasRenderingContext2D.filter as not Baseline because support is incomplete in some widely used browsers. The page checks for the API and shows an error rather than silently returning an unblurred image when the filter is unavailable.
Choose an output format
- JPG: appropriate for opaque photographs. Transparent source pixels are flattened onto white. The quality control changes lossy encoding.
- PNG: appropriate for sharp graphics, screenshots and transparency. The browser Canvas workflow uses lossless PNG encoding and therefore does not display a quality slider.
- WebP: supports transparency and adjustable quality in this workflow. Browser encoder support and exact file size can vary.
Blur often makes large areas smoother, which can help some lossy encoders compress the image, but the result is not guaranteed to be smaller. Format, quality, dimensions and the source encoding all matter. Use Image Compressor afterward when a measured byte limit is the next task.
Check the generated image
Review the result in this order:
- Coverage: confirm that the entire intended detail is inside the blurred area, including edges and shadows.
- Readability: zoom in and ask whether text, faces, plates or symbols remain recognizable.
- Boundary: in selected-area mode, check whether the rectangular edge looks acceptable.
- Image edge: inspect all four sides for unexpected transparency or darkening.
- Dimensions: confirm the source width and height were retained.
- Format and bytes: verify the actual generated Blob rather than assuming blur made the file smaller.
- Metadata: the new Canvas file does not copy source EXIF, GPS or ICC metadata in this implementation.
Illustrative blur examples
Make a photograph usable behind a headline
Assume a 1920 × 1080 JPG will sit behind white text. Choose Whole image and begin at 10 px. Create the result, check that major shapes still support the composition, and increase the radius if the background competes with the headline.
Obscure a notification in a screenshot
Assume a 1440 × 900 PNG contains a name in one notification. Choose Selected area, enlarge the rectangle beyond the complete notification, use a strong radius such as 28 px and export PNG. Inspect at 100% zoom. Use an opaque cover instead if the name must be securely redacted.
Illustrative examples. The actual visual result and file size depend on the image content, dimensions, format, browser filter and encoder.
Scope and alternatives
Adobe Express offers a broader design editor and applies its main blur adjustment to the whole image; its official guidance uses layers and cropping for localized effects. Photoshop Express also offers full and radial blur inside its mobile editing workflow.
base97 is narrower: it provides one direct whole-image or rectangular-area blur, live strength control, edge padding, three output formats and a detailed result report without requiring a larger design project. It does not claim automatic background separation, AI face detection, multiple shapes, brush masks, radial focus, motion blur or secure redaction.
Troubleshoot image blur problems
The blur does not hide enough detail
Increase the radius and enlarge the selected rectangle. Review the exported image at full size. Replace blur with an opaque cover when information must not remain inferable.
The selected rectangle is in the wrong place
Drag inside the rectangle to move it. Drag a corner handle to resize it. Reset returns the area to a centered default rectangle.
The browser reports that blur filters are unsupported
Use a current browser with Canvas 2D filter support. This page does not send the file to a server-side fallback.
The image is rejected for pixel size
Blur requires several temporary canvases. Resize the image below 20 million pixels first, then return to this page.
The result is larger than the source
Blur strength does not determine file size by itself. Try a suitable JPG or WebP quality, or run the generated file through Image Compressor.
Blur image FAQ
Can the blur be removed later?
The exported file contains newly blended pixels, not a reversible blur layer. Keep the original source separately. Do not assume this makes weak blur safe for sensitive information.
Does area blur find faces automatically?
No. The rectangle is positioned manually and the tool does not run face, plate, object or text detection.
Are the source dimensions changed?
No. This page keeps the original decoded width and height. Only the visible pixels and output encoding change.