Background blur in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Background Blur Effect

In Figma, what does applying a background blur effect to a layer do?

A It blurs only the content inside the layer, making it fuzzy.

B It changes the color of the layer to a transparent blur color.

C It blurs the content behind the layer, making the background appear out of focus through the layer.

D It removes the layer's fill and replaces it with a blur effect.

💡 Hint

Think about what you see through a frosted glass.

Background blur in Figma blurs whatever is behind the layer, not the layer's own content. This creates a frosted glass effect.

❓ visualization

intermediate

Applying Background Blur with Opacity

You have a rectangle with a background blur effect applied. What happens if you reduce the rectangle's opacity to 50%?

A The rectangle becomes semi-transparent, showing the blurred background behind it with reduced opacity.

B The background blur effect becomes half as strong, blurring less.

C The rectangle becomes fully opaque and the blur disappears.

D The blur effect applies only to the rectangle's fill color, not the background.

💡 Hint

Opacity affects the whole layer including effects.

Reducing opacity makes the entire layer, including the blurred background seen through it, semi-transparent.

❓ data_modeling

advanced

Layer Order Impact on Background Blur

In a Figma file, you have three layers stacked: a photo at the bottom, a semi-transparent rectangle with background blur in the middle, and text on top. Which layer order is correct to see the blur effect on the photo behind the rectangle?

A Rectangle with background blur at bottom, photo in middle, text on top.

B Photo at bottom, rectangle with background blur in middle, text on top.

C Text at bottom, photo in middle, rectangle with background blur on top.

D Photo at bottom, text in middle, rectangle with background blur on top.

💡 Hint

Background blur affects what is behind the layer it is applied to.

The blur effect only works if the blurred layer is above the content to be blurred. The photo must be below the rectangle with blur.

🔧 Formula Fix

advanced

Why is Background Blur Not Visible?

You applied a background blur effect to a rectangle, but the blur is not visible. What is the most likely reason?

A The rectangle has no fill or stroke, so nothing is visible to blur through.

B The rectangle is set to 100% opacity, which disables blur.

C Background blur only works on text layers, not shapes.

D The rectangle is below the background image layer.

💡 Hint

Remember that background blur affects layers behind it.

If the rectangle is below the background image, there is nothing behind it to blur, so the effect is invisible.

🎯 Scenario

expert

Creating a Frosted Glass Panel with Background Blur

You want to create a frosted glass effect panel in Figma that blurs the background image behind it, has a white semi-transparent fill, and a subtle border. Which combination of settings achieves this?

A Apply background blur effect, set fill to white with 30% opacity, add 1px black stroke with 10% opacity.

B Apply background blur effect, set fill to transparent, add 1px white stroke with 100% opacity.

C Apply background blur effect, set fill to black with 30% opacity, add 1px white stroke with 50% opacity.

D Apply background blur effect, set fill to white with 30% opacity, add 1px white stroke with 50% opacity.

💡 Hint

Frosted glass usually has a light fill and a subtle dark border for contrast.

A white fill with low opacity plus a faint black stroke creates a realistic frosted glass panel with background blur.