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.

Screenshots of the various blur size controls in Figma, Sketch, Illustrator, and Photoshop

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.

A white blurry rectangle on a black background with a small section of the edge highlighted

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.

White to black gradients representing each blur type

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.

White to black gradients representing each blur type, with coloured annotations

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.

Blur type Scale factor compared to CSS box-shadow
CSS box-shadow (Safari) 1.0
CSS box-shadow (Firefox) 1.0
CSS box-shadow (Chrome) 1.0
CSS filter: blur (Safari) 0.510204
CSS filter: blur (Firefox) 0.495050
CSS filter: blur (Chrome) 0.495050
SVG fe (Safari) 0.423729
SVG fe (Firefox) 0.427350
SVG fe (Chrome) 0.406504
Figma background blur 1.136364
Figma drop shadow 1.136364
Figma layer blur 1.136364
Illustrator drop shadow 0.490196
Illustrator filter blur 2.083333
Photoshop drop shadow 1.136364
Photoshop filter blur 0.490196
Photoshop shape blur 0.490196
Sketch background blur 0.349650
Sketch drop shadow 1.041667
Sketch shape blur 0.485437

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!

A comparison of CSS box-shadow and the blurs in Sketch

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.

A comparison of blurs in Photoshop and Figma

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.

Blur type Maximum blur size Size as CSS box-shadow
Figma background blur Unknown Unknown
Figma drop shadow Unknown Unknown
Figma layer blur Unknown Unknown
Illustrator drop shadow 144 70.588235
Illustrator filter blur 250 520.833333
Photoshop drop shadow 250 284.090909
Photoshop filter blur 1000 490.196078
Photoshop shape blur 1000 490.196078
Sketch background blur 50* 17.482517
Sketch drop shadow Unknown Unknown
Sketch shape blur 50* 24.271845

Published 11 January 2024.