Image Blur

Apply a Gaussian-style blur with adjustable radius up to 20px.

Blur an image with a sliding radius from 0 to 20 pixels. Useful for hero backgrounds, censoring sensitive content, or producing soft variants of UI screenshots. The blur is applied via ctx.filter and saved as PNG, all locally in your browser.

Common use cases

  • Blur backgrounds for hero banners and login splash screens
  • Censor faces, license plates or sensitive info before sharing screenshots
  • Create soft, frosted-glass variants of photos for design mockups
  • Generate placeholder images while a higher-res asset loads

Frequently asked questions

What kind of blur is this?
It uses the browser's native ctx.filter blur(), which is a Gaussian blur. The radius is in CSS pixels — at the source resolution, not viewport resolution.
Can I blur only part of an image?
Not in this tool — for that, crop the area first and re-composite. This tool blurs the whole image.
Does the blur preserve transparency?
Yes. PNG output keeps the alpha channel intact, with the blur applied to RGBA pixels.

Related tools