‍

Are you having issues with the background blur effect in Figma? Don’t worry, you are not alone. But we are here to help you out!

‍

There are a couple of reasons that can cause these issues, from incorrect settings to troubleshooting problems.

We can start by discussing the correct settings for this effect, as it can confuse some users. Sometimes, invalid use of the settings for the Background Blur effect in Figma can make it ineffective.

‍

The settings may be wrong

Typically, to create a background blur effect, you will need the object to be over the one you want to blur. So, you will need to create a shape or a frame.

‍

‍

The layer option must be Pass through at 100%. The color of the fill doesn’t matter, but usually white is used. 

‍

What’s important is the % of the fill color (opacity). It has to be different from 100%, which is the default option.

Something around 5% - 30% makes a typical background blur.

‍

‍

It’s important for the color opacity to be less than 100% because if you want to create the blur, you will need a semi-transparent layer. You make it transparent by reducing opacity.

And of course, don’t forget to adjust the intensity of the Background Blur effect itself.

‍

Check these settings! Make sure you are not mistaking the Layer option with the Fill option, as they can look quite similar on a whim.

‍

If they’re all right, keep reading, we have other solutions.

‍

Saved color styles

‍

Sometimes the background blur effect doesn’t work on elements that are set in a saved color style. We aren’t sure what is the cause of this, but it seems to be a troubleshooting problem.

‍

To fix this, manually set the color of the fill. We know it isn’t ideal, but it might just be your best choice.

If you want the exact same color as your saved one, just copy-paste the code of the color and you should be set.

‍

‍

There are no other known issues that cause Background Blur problems in Figma. If you are still having the problem, you can try restarting the application. Or if you are using the desktop version, try reopening the program or restarting your device.

‍

We hope this article helped you fix the issue regarding Background Blur on Figma!

‍

If you are interested in learning more about Figma, feel free to check out our other resources.

‍