Image Blur

Drop in a photo, choose a blur type and a radius, and download the result or copy an approximate CSS filter. Anything larger than 1600 px on its longest side is scaled down to that before processing, so the radius you set is measured against the resized image, not the original — the same number bites harder on a photo that came in at 4000 px.

The radius is a standard deviation, not a reach. Canvas and CSS blur(<length>) both take the length as the Gaussian's σ, which is why the visible spread is several times the number you typed. Measured here on a single white pixel line: blur(4px) scatters it across 21 px and drops the peak to 23 of 255, while blur(16px) leaves a peak of 3 — at large radii most of the contrast is simply gone, and the faint tails fall below what 8 bits per channel can hold.

The two directional types are the genuinely different ones. Horizontal and vertical motion average 2r+1 copies of the image shifted along one axis, each contributing 1/(2r+1) of the value, which is a real linear smear rather than a soft focus. At radius 8 a single copy is worth 255⁄17 ≈ 15 levels, close enough to the quantisation floor that the outermost copies round away — the measured trail came out 15 px wide against a nominal 17. "Box" is the odd one out: it lays a lightly blurred, slightly flattened copy over the sharp original, producing a haze rather than the flat-kernel average the name suggests.

One thing to know before you rely on the copy button: the CSS is a stand-in for a live element, and for the directional types it is not directional at all. The downloaded PNG is the real output.