Blur radius comparison

The most common type of blur used on the web and in design tools is Gaussian blur. There’s many ways to describe how blurry the blur is, and implementations vary so much that a blur in one app may be a completely different size to the blur in another app.

Sometimes there’s even inconsistency across different features in the same app. This makes it very difficult to convert blur size from design to production, or when moving values between or within design tools. A blur of 50 pixels in one place may not be the same as a blur of 50 pixels somewhere else. It’s difficult to know what these values represent. Some may correspond to a kernel radius or kernel diameter, others might be the radius at a specific place in the Gaussian function.

There was a time when CSS box-shadow was inconsistent across browsers, but the spec was tightened up and the blur amount is now considered to be a standard deviation equal to half the blur radius. It doesn’t matter if that description makes sense, just know that it enables consistency.

It’s possible to measure how large a blur is by creating a rectangle, blurring it, then comparing the edge of the blur to other implementations.

The image below is a portion of the edge of a blurred rectangle, for each blur type. Stacking them like this shows the relative size differences.

Observations #

Colouring the pure black and pure white regions red, indicating 50% grey in blue, and marking a distance from 50% grey (plus and minus 35%) in purple helps analyse the results and measure sizes.

All the CSS box-shadows are essentially identical, likely due to the CSS specification including information on how to treat blur radius. There’s subtle differences, but I’m going to consider them to be identical.

The SVG feGaussianBlur examples are offset. I wonder if this is due to gamma or colourspace correction? I didn’t get time to check. All browsers had lower quality SVG blurs than their CSS counterparts, especially in darker regions. Once again, it might be due to additional gamma processing. This may actually make the SVG blur the most correct, even though it’s the odd one out.

Figma is the closest match to CSS box-shadow, and all three blurs within Figma are identical. I think those are good choices. Figma requires at least a 0.2% fill for background blurs to function. Figma’s blurs have added noise, and the noise is biased to make the result one 8-bit value darker. The noise repeats every 256×256px. I’m not sure why their background blur never reaches black, given the others do.

It was surprising to see such a wide range of sizes within Illustrator, Photoshop, and Sketch. There doesn’t seem to be any reason for it, either — Photoshop’s drop shadow is the smallest blur in Photoshop, but Illustrator’s drop shadow is the largest blur in Illustrator. I can’t see any consistency in the decisions.

Scale factors #

It’s now possible to work out the relative scale factors of the various blurs, to be able to convert and visually match them. I’ve used CSS box-shadow as the baseline. Multiplying by the scale factor converts to the radius needed to match CSS box-shadow. Please note that these scale factors are just approximates, but they should be reasonably close. Also, differences in blur rendering could mean things look different anyway.

To make Sketch’s background blur look like a 50px CSS box-shadow, a value of 17.4825 is needed (50 × 0.349650 = 17.4825). To make Sketch’s drop shadow look like a 50px CSS box-shadow, a value of 52.08335 is needed (50 × 1.041667 = 52.08335). Here’s the three Sketch blur types, scaled to the equivelent CSS box-shadow value. They now all match!

Should you bust out a calculator every time you want to copy a blur value from a design tool? Probably not, but it is worth noting that Sketch’s “Copy CSS Attributes” and “Copy SVG Code” don’t scale the blurs to match how they’ll appear in browsers. It’s something to be aware of, even if it’s not critical in all situations. Rounding the values might be the best balance of accuracy and nice CSS? 17.4825 could become 18, which might look close enough.

Matching a blur from one design tool to another is also possible. Let’s say we want a 50px Photoshop filter blur to be replicated in Figma as a background blur. The formula for that is (destinationScaleFactor / sourceScaleFactor) × sourceRadius. In our case, that’s (1.136364/0.490196) × 50 = 115.9091465455. A 50px Photoshop filter blur can be matched with a 115.9px Figma background blur.

Maximum blur size #

The maximum blur size varies across different tools and features within tools. Some apps allow any value in the UI, but seem to clamp the size when rendering, which may also be zoom dependant. It’d be possible to figure out their maximum, but it’d take some time. Those are listed below as “unknown”.

Sketch’s maximum background blur and shape blur size can be increased by scaling objects up, even though the UI doesn’t let you type a value over 50.

Published 11 January 2024.