Skip to main content
Question

Background blur effect doesn't match in inspect mode

  • February 10, 2023
  • 2 replies
  • 1029 views
B

Hello,

We just had a situation with our developers where their implementation of the a background blur was too strong.

We set the blur value in Figma effect to 4, bit in inspect the css value is blur(2px).
Consistently, the CSS values are 0,5 * the value of the blur value in “Design” in Figma.

Why is that? Shouldn’t it be correlated? So, input value in figma = blue(4px) in css?

Is it a bug, or is it a friday-mind-fart playing tricks on me?

This topic has been closed for comments

Gleb
  • Gleb
  • Power Member
  • February 10, 2023

I don’t know for sure, but I think this value probably is platform specific. For example in CSS it’s 0.5 of Figma’s value, but somewhere like iOS or Android (maybe, I don’t know for certain) the value might match Figma better.

I think the main question here would be does it look similar in Figma & CSS if you use the 0.5x values from the inspect panel? Or do you find that the original Figma’s exact value more closely resembles CSS? If the latter, indeed that might be a bug.

B

@Gleb, well in spect for CSS the value is 2px but for Android it’s 4dp and iOS 4pt. So, could definitely be related to something platform specific.

But I have no idea why it’s 0.5x for CSS.

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings