Blurring an entire image is different from blurring just part of one. A full image blur is what a photo needs behind foreground text, what a thumbnail needs when the sharp version would be distracting at a small size, or what a screenshot needs as a quick way to obscure detail before sharing it. This tool applies the effect uniformly across the whole frame in a single pass rather than requiring you to paint a mask over one region.
The photo never leaves your device. It is decoded by the browser, blurred using the canvas element's own built in filter, and re encoded locally, so a private screenshot stays private the entire time it is being softened.
When a full image blur is the right tool
A blurred background is one of the most common uses: taking a photo and softening it enough that bold foreground text stays perfectly readable on top of it, without needing a solid colour overlay that would hide the image entirely. A light to moderate blur radius keeps the photo's colours and shapes recognisable while removing enough detail that text placed over it reads cleanly at any font weight, which is exactly the effect people mean when they ask how to blur photo background content for a hero image.
A stronger blur works as a quick privacy pass before sharing a screenshot that contains something you would rather obscure, such as a name, an account number or another sensitive detail, when a full crop or a solid box would remove more context than you want to lose.
- Use a light blur, roughly 4 to 8 pixels, for a background image that text will sit on top of.
- Use a moderate blur, roughly 10 to 20 pixels, for a soft focus or dreamy photographic effect.
- Use a heavy blur, 30 pixels or higher, to obscure sensitive detail in a screenshot before sharing it.
- Use a light blur on a thumbnail that would otherwise look distracting or too detailed at a small size.
- Skip blurring and crop instead when you need to remove content entirely rather than soften it.
Reading the blur radius correctly
The radius controls how far the blur spreads from each pixel, measured in the same pixel units as the image itself, so the visual effect of a given radius depends on the resolution of your source image. A 10 pixel blur on a 400 pixel wide thumbnail is a strong, obvious effect, while the same 10 pixel radius on a 4000 pixel wide photo is barely visible, since it only affects a tiny fraction of the frame.
For an obscuring blur meant to genuinely hide detail, always check the result at the resolution the image will actually be viewed at, since a blur that looks sufficient when previewed small can still reveal readable detail once someone views the full size original or zooms in.
A privacy note about blurring sensitive content
Blurring reduces the visibility of detail, but it is not a cryptographically secure way to remove information, particularly at a light radius. Text behind a weak blur has occasionally been recovered using image processing techniques that reverse a predictable blur function, so for genuinely sensitive information such as a password or a full account number, cropping the content out entirely or covering it with a solid opaque box is the safer choice, not a blur at any radius.
How this image blur tool works under the hood
The tool sets the canvas context's filter property to a blur function with your chosen radius before drawing the image, which applies a browser native gaussian blur as part of the canvas rendering pipeline, the same primitive used by the CSS filter property that blurs elements on a live web page. That is a genuinely different algorithm from a simple box blur, producing the smoother, more natural falloff a gaussian blur is known for.
Because the blur is computed entirely by the browser's own rendering engine, there is no server involved and no upload, which you can confirm by watching your browser's network panel while the image is blurred. It also means there is no limit on file size or on how many times you adjust the radius and re blur an image in one session.
How to blur an image
- 1
Add your photo
Drag an image onto the drop area, or click it to choose a file. It stays entirely on your device.
- 2
Drag the blur radius slider
Move it to a light setting for a soft background or a strong setting to obscure detail.
- 3
Check the preview
Confirm the blur looks right at the resolution the image will actually be viewed at.
- 4
Blur and download
Press blur, then download the softened image once you are happy with the result.
Related tools worth bookmarking
Sources and further reading
- MDN: CanvasRenderingContext2D.filterThe canvas property this tool uses to apply a browser native gaussian blur function to the drawing context.developer.mozilla.org
- W3C: Filter Effects, the blur functionThe specification defining the gaussian blur algorithm and radius behaviour that the canvas filter implements.w3.org
Frequently asked questions
Common questions about the image blur tool.
A box blur averages a square of neighbouring pixels evenly, which can look slightly artificial or boxy at the edges of shapes. A gaussian blur weights nearby pixels more heavily than distant ones following a smooth bell curve, producing the softer, more natural falloff most people expect when they think of a blur, and it is what this tool applies.
No. The blur is applied using the canvas element's built in filter feature, running entirely in your browser. Your photo is never transmitted to a server, which you can confirm by checking your browser's network panel while the blur is applied.
This tool blurs the entire image uniformly. Blurring only a specific region requires masking that area separately from the rest of the photo, which is a more involved technique typically found in a full layer based photo editor rather than a single filter applied across the whole frame.
Not reliably. A blur, especially at a light radius, has occasionally been reversed using image processing techniques, so it should not be relied on for genuinely sensitive content such as a password or an account number. Cropping that content out entirely or covering it with a solid opaque box is the safer choice.
The blur radius is measured in pixels, so its visual strength depends on the resolution of the source image. The same radius looks strong on a small thumbnail and much weaker on a large, high resolution photo, since it only affects a small fraction of a bigger frame.
Yes. There is no account, no daily cap and no watermark added to the result. Because everything runs locally in your browser rather than on a paid server, this image blur tool can process as many photos as you like in one session at no cost.
Somewhere between 4 and 8 pixels usually works well for a background image that foreground text will sit on top of, since it keeps the photo's colours and shapes recognisable while removing enough fine detail for text to stay perfectly readable at any weight.