Image Blur Tool

The Image Blur tool applies blur effects to any image for artistic purposes (soft focus, dreamy backgrounds) or privacy (obscuring faces, license plates, sensitive text). Choose from Gaussian blur (smooth, all-directional), motion blur (directional streaking), or radial blur (simulating zoom or rotation), with configurable intensity. All processing runs in your browser — original images and blurred results stay private, which matters when you\u2019re blurring for privacy reasons.

Gaussian blur is the most common — it softens every pixel by weighted-averaging with neighbors based on a Gaussian distribution. Motion blur simulates camera movement or subject movement, with directional streaking at a chosen angle. Radial blur creates a zoom or rotational blur effect around a center point. Intensity controls blur radius in pixels — higher values mean more blur but also slower processing. For privacy-specific use (blurring faces in photos before sharing), use high intensity to ensure the subject isn\u2019t recoverable.

Gaussian blur uses the CSS filter: blur(Npx) or Canvas 2D ctx.filter property. The Gaussian formula is:

G(x,y) = (1 / (2πσ²)) × e^(-(x² + y²) / (2σ²))

Where σ (sigma) controls the blur radius. Larger σ spreads each pixel\u2019s influence wider. Implementation uses a separable 1D kernel applied horizontally then vertically for performance.

Performance: naive 2D Gaussian is O(N × r²) where N is pixel count and r is radius. Separable implementation is O(N × r). Large blurs (r > 20) still take time; for very large blurs, most implementations use iterated box blur approximation which is O(N) independent of radius.

Motion blur is directional — pixels shift along a line in one direction with decreasing weight. Implementation: convolve with a line-shaped kernel.

Radial blur is simulated by taking multiple samples along the radius from a center point and averaging. Creates a zoom-blur effect. Computationally expensive on large images.

Browsers support:
- CSS filter: blur(Npx) for display (not exported)
- Canvas ctx.filter = \"blur(Npx)\" (supported in modern browsers, applies during drawing)
- Pixel-level blur by reading ImageData and applying convolution manually (slower but portable)

This tool prefers Canvas ctx.filter when supported, falling back to manual convolution on older browsers.

Privacy blur considerations:
- Extreme blur of identifying features (faces, plates) should be irreversible. Radius of 20+ pixels on a face ensures non-recovery.
- Small blur radius is reversible with de-blurring algorithms. Don\u2019t trust 2-5px blur for privacy.
- Better: cover the region with a solid block or pixelate it (which is effectively aggressive blur).

Output quality: saving a blurred image as JPEG compresses it further. Blur naturally makes compression more effective (less high-frequency detail), so JPEG files shrink significantly.

Edge handling: at image edges, the blur kernel extends beyond the image. Common strategies: extend edges (clamp to edge pixel), wrap (tile), reflect (mirror). Affects how the blur looks at boundaries.

Compared to Photoshop Gaussian Blur, this tool is faster for single blur operations. Photoshop has more blur types (lens blur, smart blur) and selective control; this tool is for quick whole-image blur.

Compared to mobile photo app blur, this tool preserves image quality better (no additional compression). Phone apps often degrade images further; browser-based blur doesn\u2019t.

Compared to CSS filter: blur(), this tool produces an actual blurred image file. CSS blur is display-only; this saves the blur permanently.