Bug Report: Background Blur Effect Not Displaying Correctly

General Discussion
1

Hello Figma Team,

I’ve encountered a potential bug when using the background blur effect in my project. Here’s a brief description of the issue:

  1. Issue: When applying a background blur effect on a rectangle (with specific blur settings), the effect doesn’t appear as expected when layered with other elements, such as a button.
  2. Steps to Reproduce:
  • Create a frame for an iPhone 16 Pro Max.
  • Insert an image as the background.
  • Add a rectangle with the following properties: Fill: #000000 20%, Effect: Background Blur (200).
  • Add another rectangle on top for a button with Fill: #333333 20%, Effect: Background Blur (20).
  • The first rectangle (with a stronger blur effect) does not display correctly once the second rectangle (button) is added above it.
  1. Expected Behavior: The background blur effect should remain visible and function as intended, with the first rectangle’s blur effect still visible behind the button.
  2. Actual Behavior: The blur effect of the first rectangle is no longer visible, and it seems like it’s overridden by the second rectangle.
  3. Environment:
  • Figma Version:
  • OS: Windows
  • Browser: Chrome

Is this a bug or am I missing a configuration? Any assistance would be appreciated!

Thank you.