Building a Browser-Based Image Blur Tool with Canvas API (No Libraries)

Blurring an image in the browser sounds like it should need a library. It doesn't. The Canvas 2D API has a built-in filter property that accepts the same CSS filter syntax you already know — including blur(). This post covers how I built a fully client-side image blur tool in Next.js with blur presets, a custom radius slider, and edge-bleed-free download output. The live tool: ultimatetools.io/tools/image-tools/blur-image/ The core: ctx.filter = "blur(Xpx)" The entire blur effect is one line: ctx.filter = `blur(${blurRadius}px)`; ctx.drawImage(img, 0, 0); ctx.filter accepts any CSS filter string. Setting it before drawImage applies the filter to the drawn pixels. The result is the blurred image rendered onto the canvas, ready to export. This works in all modern browsers and requires zero dependencies. The edge bleeding problem There's a catch. When you blur an image and the blur radius is large, the edges of the image fade to transparent — the blur algorithm needs pixels outside the ca