PNG Blur Tool

What blur does and why we use it

A blur replaces every pixel in an image with a weighted average of its surrounding pixels. The more pixels included in the average (a larger "radius"), the more spread-out and indistinct the result becomes. Visually, blur softens detail, smears boundaries, and gradually reduces an image to a smooth field of colour and tone. It's one of the oldest and most useful image operations.

Blur is everywhere on the modern web: behind text overlays on hero photos (so the text stays readable), in privacy redactions (numberplates, faces, sensitive screen captures), in "frosted glass" UI panels, as low-quality image placeholders that load before the full image is ready, and as a creative effect to focus attention on a sharper subject within a soft frame. This tool covers all those use cases with a single slider.

How this blur works

The tool uses the browser's built-in CSS-style filter pipeline (ctx.filter = 'blur(Npx)') which applies a hardware-accelerated Gaussian-style blur in a single GPU pass. The blur radius is measured in pixels and matches what designers expect from CSS backdrop-filter, Figma blur effects, and similar tools — so a 10-pixel browser blur will look the same applied in Figma or via this tool.

The Gaussian profile means pixels close to each source pixel contribute more to the average than pixels further away, producing a smooth, natural-looking blur. Box blur (a simpler average) and motion blur (directional averaging) produce different visual results and are not used here.

Blur radius — what each range feels like

• 0 px — no change.
• 1–2 px — barely noticeable softness. Useful for taking edge from over-sharpened photos.
• 3–5 px — visible softness without losing recognisability. Good for "halo glow" effects when applied to a duplicate layer.
• 6–10 px — moderate blur, subjects still identifiable. Typical for placeholder images and subtle privacy overlays.
• 10–20 px — strong blur, fine detail destroyed. Common for backdrop "frosted glass" effects behind cards or modals.
• 20–35 px — heavy blur, only large shapes and dominant colours remain. Used for hero-image backgrounds where text overlays need maximum contrast.
• 35–50 px — extreme blur, image becomes an abstract colour field. Great for blurhash-style placeholders or art backgrounds.

Practical uses for blur

Privacy redaction

Blurring faces, numberplates, screen-capture sensitive data and other identifying details is a common moderation task. Important caveat: standard Gaussian blur can sometimes be partially reversed by attackers using deconvolution and machine-learning techniques, especially at low radii. For genuinely sensitive content (passwords, credit card digits, security tokens), use a solid colour rectangle or the PNG Pixelate tool at a high pixel size instead. Blur is acceptable for casual privacy (faces in vacation photos, mundane addresses) but not for high-stakes redaction.

Background for text overlays

Adding a 15–25 px blur to a hero photo before overlaying white text dramatically improves text readability. This is the technique used by Apple, Stripe, Shopify and most major SaaS landing pages.

Placeholder images (LQIP)

Heavily blurred, very small versions of images can be inlined as Base64 data URIs and displayed instantly while the full image loads. Combined with the PNG Resizer (shrink to 20–40 px wide), PNG Blur (heavy blur), and PNG to Base64, you can produce sub-1KB placeholders.

Frosted-glass UI elements

The classic iOS / macOS look: a translucent panel that shows a blurred view of whatever sits behind it. While modern browsers can do this live with backdrop-filter: blur(), sometimes you need a pre-rendered blurred copy for older browsers or for export.

Creative bokeh / depth-of-field effect

Blurring the background of a portrait (after isolating the subject) simulates the shallow depth of field of a large-aperture lens. This is the basis of "portrait mode" on phone cameras.

Tips and best practice

• Don't rely on blur for high-stakes privacy. Use pixelation or a solid mask for credit card numbers, passwords, IDs.
• For text overlays on hero images, blur the image, then darken it 30–40% (use the Brightness tool) — blur alone often isn't enough contrast.
• Blur radius scales visually with image size. A 10 px blur on a 4K image is barely noticeable; the same 10 px on a 600 px thumbnail is huge.
• Large blur radii are expensive on mobile. If you need a heavy blur, shrink the image first.
• If the blurred output has hard edges at the border, that's a normal artefact of the kernel running off the edge of the image. Crop in 1–2 % to remove it.

FAQs

Related tools