Apply adjustable Gaussian blur to images

Soften an image by applying a browser blur radius and exporting the result.

freeworks offlinenothing uploaded
ToolBlur Filter
Input
Output
—

How it works

The selected radius is passed to the CSS blur operation and Canvas redraws the image at source dimensions. The browser performs the convolution-like softening and produces a PNG.

  • Radius 5 is the initial softening amount.
  • The radius is a CSS length, not a custom kernel count.

Worked example

Blur a test tile
Input
											Input: data:image/png;base64,iVBORw0KGgo=
Radius: 5
Output
												PNG data URL with a 5px CSS blur

When to use this

Privacy previews soften regions, design mock-ups blur backgrounds, and graphics lessons compare radius with detail loss.

Edge cases

  • Blur spreads colour across contrasting or transparent borders.
  • A large radius can erase small features.
  • If the runtime lacks Canvas, no transformed pixels are available and the original data is passed through.

References