Image Blur & Pixelate

How to Use the Blur and Pixelate Tool

1. Upload a photo or screenshot by dragging into the dropzone. The file is read locally and drawn into a canvas for processing.
2. Choose an effect mode: "Blur" for a smooth Gaussian spread, or "Pixelate" for a classic mosaic-block censor look.
3. Drag the intensity slider. For blur, the slider maps to a radius in pixels from 1 to 30. For pixelate, it maps to the mosaic block size from 1 to 50 pixels per cell.
4. Watch the preview update live. Heavier settings take a few more milliseconds but stay interactive thanks to the browser\'s optimized CSS filter pipeline.
5. Click "Download" to export the processed image as PNG. The effect is baked into the pixel data permanently.

Two Effects, Two Algorithms

Blur and pixelation look similar at a glance but use very different math. A Gaussian blur computes each output pixel as a weighted average of nearby source pixels, with weights that follow the bell curve of a Gaussian function. The larger the radius, the more neighbors get mixed in, and the smoother the transitions between colors become. We implement this by applying ctx.filter = "blur(Npx)" on the Canvas 2D context, which delegates to the browser\'s GPU-accelerated filter pipeline - typically the same SVG filter primitive (feGaussianBlur) defined in the W3C Filter Effects specification.

Pixelation is conceptually a two-step downscale-then-upscale. We draw the image at a shrunken size into a scratch canvas, then draw the tiny result back at full size with imageSmoothingEnabled = false. The nearest-neighbor interpolation in the upscale step is what produces the blocky mosaic. A block size of 20 means the image is effectively rendered at one-twentieth of its width, then blown back up, so each original 20x20 region collapses into a single flat color (the average of its interior).

When to Reach for Blur or Pixelation

• Censoring a credit-card number, phone number, or email address in a screenshot before posting it to a bug tracker.
• Anonymizing faces or license plates in photos shared publicly on a blog post.
• Blurring a background behind a product shot to create a faux depth-of-field effect when your camera could not do it in-lens.
• Creating a Gaussian-blurred hero-image backdrop for a website where text overlays need contrast.
• Producing a pixel-art aesthetic overlay for retro-themed designs, 8-bit tributes, or game mockups.
• Generating a privacy-safe placeholder thumbnail that hints at the content without revealing detail, for a CMS gallery.

Censorship Pitfalls You Need to Know

• Light pixelation can be reversed. If the block size is small relative to the text being hidden, techniques like "unpixelate" demosaicing attacks (and in extreme cases ML-based deblurring) can recover the hidden content. Use a block size at least as large as the height of the censored text, ideally larger.
• Gaussian blur is more reversible than it looks. For a known text font, a mild blur can be partially unwound. For true censorship, use a solid black rectangle - pixel-level deletion - not blur.
• The effect is permanent. Once you export a blurred or pixelated image, the original pixel values are gone. Always keep the uncensored master file somewhere safe if you might need the full content later.
• Edge handling at the image boundary. Gaussian blur near the edges of the image falls off because the kernel reads "outside" pixels. The browser typically extends edge color outward, but subtle halos can appear at the boundary.
• The whole image is processed. This tool applies the effect globally. For selective blur (just a face), you would need a mask-aware editor; this is intentional to keep the interface simple.

The Math Behind Gaussian Blur

A Gaussian filter convolves the image with a two-dimensional Gaussian kernel G(x,y) = (1/(2pi*sigma^2)) * exp(-(x^2+y^2)/(2*sigma^2)). The parameter sigma controls how far the blur reaches: a sigma of 2 gives a visually noticeable softness, sigma of 10 heavy bokeh, sigma of 30 obliterates detail. The CSS and SVG Filter Effects specification maps the blur(Npx) parameter to a standard deviation of approximately N, though browsers are allowed to truncate the kernel for performance. Because Gaussian is separable (the 2D kernel equals a 1D horizontal blur followed by a 1D vertical blur), GPU implementations run it in two linear passes, which is why "blur(30px)" on a 4000-pixel image still completes in well under a hundred milliseconds. The theoretical trade-off versus a box blur is smoothness: box blur averages equal weights over a square window and shows subtle banding, while Gaussian falls off smoothly and looks perceptually natural.

Alternatives When You Need More Power

For selective blur - masking just a face while the rest of the image stays sharp - a full editor is required: Photoshop\'s Blur tool with a layer mask, Affinity\'s Inpainting brush, or Photopea\'s free browser version of the same workflow. ImageMagick\'s magick input.jpg -blur 0x20 output.jpg gives pixel-precise control over sigma (0x20 means radius auto, sigma 20) for batch pipelines. For true privacy-grade redaction, dedicated tools like ObscuraCam (mobile) and PDF redaction tools use solid-color replacement rather than blur, because blur is detectably reversible. Squoosh.app does not offer blur, but can stack AVIF encoding on top of an already-blurred file for extreme compression. Use this tool for quick, global censor-or-stylize jobs; reach for mask-aware editors when you need to affect only part of an image.