About Image Blur

Apply canvas blur (0–40px) — great for hero backgrounds. Part of the DevTools Surf developer suite. Browse more tools in the Images collection.

Use Cases

• Frontend devs creating blurred hero section backgrounds
• UI designers generating frosted-glass card backdrops
• Content creators obscuring sensitive areas in screenshots
• Marketers producing depth-of-field effects for product photos

Tips

• Use 8-12px blur for readable text-over-image overlays
• Apply 20-40px blur to create frosted-glass UI backgrounds
• Download the blurred image as a low-weight hero placeholder

Fun Facts

• Gaussian blur is named after Carl Friedrich Gauss, whose 1809 normal distribution formula became the mathematical basis for the convolution kernel used in image processing.
• Apple's 'frosted glass' UI effect, introduced in iOS 7 (2013), popularized heavy background blur and spawned CSS backdrop-filter adoption across the web.
• A single-pass box blur applied three times closely approximates a Gaussian blur — a trick Ken Perlin documented that became standard in real-time rendering.

FAQ

What blur algorithm?

Gaussian blur via canvas filter. Radius 0–40 pixels; larger radius = softer image. Fast enough for real-time preview.

Is this for privacy?

Only for casual use. Strong blur can sometimes be reversed with ML (face reconstruction, license-plate deblur). For genuine redaction, black-box the pixels.

How does it affect file size?

Blur doesn't reduce size on its own — the image has the same dimensions. Combine with JPEG compression to exploit the extra smoothness for smaller files.

Can I preserve edges?

This tool is isotropic Gaussian only. For edge-aware blur (surface blur, bilateral), use dedicated photo editors like Photoshop or GIMP.