Blur Intensity Isn't Just a Px Number
CSS filter: blur() takes an absolute px value, but the blur you actually perceive is determined by the radius relative to image size. A 20px blur on an 800px image looks subtle, but the same 20px on a 200px thumbnail is strong enough to obscure shapes entirely.
This calculator takes image width and purpose, applies width × purpose-specific ratio, and shows both the recommended blur radius and what percentage of the image it represents.
Blur Intensity by Purpose
For softening a background to emphasize foreground content, around 3% of width works well. Low-res loading placeholders look fine at a lighter 1.5%. Privacy blur for faces or license plates needs at least 5% to meaningfully reduce the risk of the original being recovered.
A Word of Caution
If the blur radius is too small, sharpening or upscaling filters can partially reveal the original — so for privacy purposes, err on the side of a stronger value.
Frequently Asked Questions
The same px value feels stronger on small images and weaker on large ones — judge it as a percentage of image width instead.
At least 5% of image width. Weaker blur risks being reversed with sharpening tools.