Blur radius comparability
The most typical sort of blur used on the internet and in design instruments is Gaussian blur. There’s some ways to explain how blurry the blur is, and implementations differ a lot {that a} blur in a single app could also be a totally completely different measurement to the blur in one other app.
Typically there’s even inconsistency throughout completely different options in the identical app. This makes it very troublesome to transform blur measurement from design to manufacturing, or when transferring values between or inside design instruments. A blur of fifty pixels in a single place might not be the identical as a blur of fifty pixels some place else. It’s troublesome to know what these values symbolize. Some could correspond to a kernel radius or kernel diameter, others could be the radius at a particular place within the Gaussian perform.
There was a time when CSS box-shadow was inconsistent throughout browsers, however the spec was tightened up and the blur quantity is now thought-about to be a standard deviation equal to half the blur radius. It doesn’t matter if that description is smart, simply know that it permits consistency.
It’s doable to measure how massive a blur is by making a rectangle, blurring it, then evaluating the sting of the blur to different implementations.
The picture beneath is a portion of the sting of a blurred rectangle, for every blur sort. Stacking them like this exhibits the relative measurement variations.
Observations #
Colouring the pure black and pure white areas crimson, indicating 50% gray in blue, and marking a distance from 50% gray (plus and minus 35%) in purple helps analyse the outcomes and measure sizes.
All of the CSS box-shadows are basically equivalent, doubtless as a result of CSS specification together with data on tips on how to deal with blur radius. There’s delicate variations, however I’m going to think about them to be equivalent.
The SVG feGaussianBlur examples are offset. I’m wondering if this is because of gamma or colourspace correction? I didn’t get time to test. All browsers had decrease high quality SVG blurs than their CSS counterparts, particularly in darker areas. As soon as once more, it could be attributable to further gamma processing. This may increasingly truly make the SVG blur probably the most right, although it’s the odd one out.
Figma is the closest match to CSS box-shadow, and all three blurs inside Figma are equivalent. I believe these are good selections. Figma requires not less than a 0.2% fill for background blurs to perform. Figma’s blurs have added noise, and the noise is biased to make the outcome one 8-bit worth darker. The noise repeats each 256×256px. I’m unsure why their background blur by no means reaches black, given the others do.
It was stunning to see such a variety of sizes inside Illustrator, Photoshop, and Sketch. There doesn’t appear to be any purpose for it, both — Photoshop’s drop shadow is the smallest blur in Photoshop, however Illustrator’s drop shadow is the most important blur in Illustrator. I can’t see any consistency within the choices.
Scale components #
It’s now doable to work out the relative scale components of the varied blurs, to have the ability to convert and visually match them. I’ve used CSS box-shadow because the baseline. Multiplying by the size issue converts to the radius wanted to match CSS box-shadow. Please word that these scale components are simply approximates, however they need to be fairly shut. Additionally, variations in blur rendering might imply issues look completely different anyway.
Blur sort | Scale issue in comparison with 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 form blur | 0.490196 |
Sketch background blur | 0.349650 |
Sketch drop shadow | 1.041667 |
Sketch form blur | 0.485437 |
To make Sketch’s background blur appear to be a 50px CSS box-shadow, a price of 17.4825 is required (50 × 0.349650 = 17.4825). To make Sketch’s drop shadow appear to be a 50px CSS box-shadow, a price of 52.08335 is required (50 × 1.041667 = 52.08335). Right here’s the three Sketch blur varieties, scaled to the equivelent CSS box-shadow worth. They now all match!
Do you have to bust out a calculator each time you wish to copy a blur worth from a design software? In all probability not, however it’s price noting that Sketch’s “Copy CSS Attributes” and “Copy SVG Code” don’t scale the blurs to match how they’ll seem in browsers. It’s one thing to concentrate on, even when it’s not crucial in all conditions. Rounding the values could be the most effective steadiness of accuracy and good CSS? 17.4825 might turn into 18, which could look shut sufficient.
Matching a blur from one design software to a different can also be doable. Let’s say we would like a 50px Photoshop filter blur to be replicated in Figma as a background blur. The system for that’s (destinationScaleFactor / sourceScaleFactor) × sourceRadius. In our case, that’s (1.136364/0.490196) × 50 = 115.9091465455. A 50px Photoshop filter blur may be matched with a 115.9px Figma background blur.
Most blur measurement #
The utmost blur measurement varies throughout completely different instruments and options inside instruments. Some apps permit any worth within the UI, however appear to clamp the scale when rendering, which can even be zoom dependant. It’d be doable to determine their most, but it surely’d take a while. These are listed beneath as “unknown”.
Sketch’s most background blur and form blur measurement may be elevated by scaling objects up, although the UI doesn’t allow you to sort a price over 50.
Blur sort | Most blur measurement | Dimension 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 form blur | 1000 | 490.196078 |
Sketch background blur | 50* | 17.482517 |
Sketch drop shadow | Unknown | Unknown |
Sketch form blur | 50* | 24.271845 |
Revealed 11 January 2024.