A blur image for website use softens one or more areas of a picture so the result blends more naturally with surrounding text, controls, and other visual elements. The Blur Image tool handles that task in a single browser tab: upload a JPG, PNG, or WebP, choose whether the blur should cover the full image or one precise rectangle, set a radius, and download a PNG that is rendered at the source image's natural pixel dimensions. The original file never leaves the device, and the downloaded picture is generated on a separate canvas at the source image's natural width and height so a small on-page preview does not become a low-resolution export.
Web pages lean on blur for very different reasons than social posts. A hero photograph on a landing page often needs a soft focus so a paragraph of copy stays readable. A background image on a dashboard tile should be calm, not distracting. A screenshot used in documentation sometimes needs an address, an email, or an account number softened before it goes live. In every case, the practical question is the same: which area needs softening, how strong should the blur be, and how do you get a usable file without round-tripping through a heavyweight design app.
Why website images often need a blur layer
Raw photographs carry detail that fights text and controls. Sharp edges, busy patterns, high-contrast faces, and recognisable text all compete with the page. Softening the picture pushes those details into the background and gives headings, buttons, and form fields room to breathe. Designers reach for a blur layer when they need to preserve a photograph's mood without preserving its detail.
Three common website triggers show up again and again. The first is a hero or banner photo behind a centred headline, where a moderate blur reduces visual noise without making the image feel obviously out of focus. The second is a card, tile, or sidebar background that should hint at content rather than display it. The third is a screenshot or document image that contains sensitive information, such as an email address, a license number, or a customer's name, that has to be softened before publication.
A useful mental model is that the blur radius controls how far the tool samples neighbouring pixels. A small radius produces a gentle softening suitable for backgrounds and overlays. A larger radius produces a much stronger effect that begins to look like frosted glass. Picking the right radius is largely about how much context the surrounding area needs to read as a coherent scene.
How to blur an image for a website using Blur Image
The workflow is intentionally short. Each step happens in the open browser, and the source image is never uploaded to a server.
- Choose a JPG, PNG, or WebP image and confirm its displayed pixel dimensions. The width and height shown in the tool are the natural pixel dimensions of the source file, which is the same coordinate system the rectangle mode uses for X, Y, width, and height.
- Decide whether the blur should cover the entire image or a single rectangular area. For a hero background, pick full-image mode. For a precise spot such as one face or one block of text on a screenshot, pick rectangle mode and enter the X and Y coordinates of the top-left corner plus the width and height, all in pixels.
- Set the blur radius. A small value gives a soft haze; a larger value gives a much stronger smoothing. Preview the result against the design you intend to drop the image into, and adjust the radius until the surrounding text and controls stay readable.
- Choose Blur image, inspect the preview and the reported output dimensions, and download the PNG. The download is generated on a separate canvas at the source image's natural pixel width and height, so the saved file is not just a screenshot of the smaller on-page preview.
- Open the downloaded PNG at 100 percent zoom and check the selection boundary, output size, and any detail you intended to hide. If the rectangle is slightly off or the radius is too strong, change the inputs and generate a new file. Each new generation replaces the previous browser download object.
Full image mode versus rectangle mode for website assets
The two modes serve very different website jobs. Full image mode paints the blurred result across the whole picture and is the simpler choice when the goal is a uniformly soft background, banner, or card image. Rectangle mode paints the original picture first and then clips a filtered draw to one clamped area, so pixels outside the rectangle stay untouched. That makes rectangle mode the right tool when only one part of the picture should be softened, such as a face, a license plate, or one block of text on a screenshot.
| Mode | Best website scenario | What stays untouched |
|---|---|---|
| Full image | Hero photos, banner backgrounds, card backgrounds, decorative tiles | Nothing; the entire image is softened |
| Rectangle | Screenshots with one address to hide, single faces to soften, product details to obscure | All pixels outside the clamped rectangle |
Rectangle mode accepts coordinates in the source image's own pixel system. If the rectangle extends past an edge, the tool clamps it to the available image area rather than expanding the output or failing. Coordinates can also be reused across images of the same size, which makes the area repeatable across a batch of similar screenshots.
Blur kernels sample neighbouring pixels, which means colours and shapes close to the rectangle boundary can blend into the selected area. Increase the rectangle size or radius when the transition needs more surrounding context to draw from. Always inspect the downloaded file at full size rather than relying on the on-page preview.
Output format, dimensions, and weight for the web
The download is always a PNG. PNG is used because the browser can produce it locally without installing a format-specific encoder or asking a server to convert the file. PNG also supports lossless pixels, so the exported picture is a faithful record of the blurred canvas at the source image's natural size.
The exported PNG is rendered on a separate offscreen canvas at the source image's natural width and height. The on-page preview canvas may be reduced for inspection, but it is not what gets downloaded. This separation prevents the common failure where a convenient 900-pixel preview silently becomes a low-resolution export. The reported output dimensions in the result text describe the file you will actually save.
If the website cares about file weight, two numbers help. The exported PNG keeps every pixel of the source image, so it is heavier than a JPEG of the same picture and noticeably heavier than a WebP. If the site serves many blurred backgrounds, it is worth converting the exported PNG to a compressed format such as WebP or PNG To JPG before publishing. The blur itself does not change the pixel count, so compression savings come from the format change rather than from the effect.
Local browser processing and why it matters for site assets
Decoding, drawing, blurring, and PNG creation all happen in the current browser tab. There is no upload step, no remote processing queue, no account storage, and no server-side copy of the source file. For website assets, this is a useful property in three situations: a draft mockup that should not leave the workstation, a screenshot that contains internal information, and a hero photo that is being softened for the first time and has not been published yet.
The same workflow protects the original asset. If a copy of the unblurred picture should remain available for other uses, keep the original file outside the tool and only upload a working copy. Each new blur generation replaces the previous browser download object, and closing the tab releases temporary object URLs. That makes it easy to start over from the original whenever a coordinate or radius needs to change.
Common website blur patterns and small adjustments
A few patterns come up often enough to keep in mind. A hero photograph on a long landing page usually wants a moderate radius so the picture still reads as a real scene; pushing the value too high makes the image feel artificial. A dashboard sidebar background usually wants a strong radius so detail does not pull attention away from controls. A documentation screenshot that needs to hide an email address or licence number usually wants a small rectangle with a moderate radius; a hard rectangle with a strong radius washes the surrounding pixels more than the targeted pixels.
If a portrait photograph crops at a face, the rectangle is best placed around the face with a small radius, and then the rest of the picture is left untouched. If the goal is to soften every face in a group photo at once, full-image mode with a moderate radius is usually simpler and produces a more even result than a hand-drawn rectangle around each face.
A useful sanity check after every export is to view the PNG at 100 percent zoom in the same window the website will use, place it behind a representative line of body text, and confirm that the text reads clearly. If it does not, raise the radius, drop the image's contrast in a follow-up edit, or place a semi-transparent overlay over the picture. If the blurred region looks like a soft halo around sharp edges, the radius is usually too small and growing it slightly will make the boundary feel less forced.
Finally, remember the limit. Blur is a visual effect, not secure redaction. A softened face, address, account number, license plate, document field, or private message may still be recognizable, recoverable, or inferable from context. For a website that must display sensitive content safely, remove or cover the source pixels with a suitable redaction workflow and verify the exported file, its metadata, and the surrounding context. A blur layer is the right tool for design; it is not the right tool for proof that information has been permanently removed.