Dynamic background blur in overlays

When creating an overlay for something like a tooltip or notification center, if you use a glassmorphism effect with background blur, you’ll always see what’s behind the overlay in the file. The expected result would be to see what behind the overlay while presenting. For example, if I want to the overlay to open across multiple frames, with different backgrounds, I would have to duplicate the overlay and frame it’s displayed over to achieve this. But, that doesn’t solve the issue if the user scrolls the frame behind it, as the background of the overlay wouldn’t scroll with the page.

Expected:
Screen Shot 2021-03-19 at 4.14.54 PM

What’s happening:

  1. Does anyone have a work around or a way for the overlay to always show what’s behind it while presenting instead of what’s in the file?

I am not sure if I get you fully. But you seem to have a solid grey background on that overlay frame.

  1. Make it translucent (e.g. 10% opacity).
  2. Apply background blur effect.
  3. Make sure the layer is on top of everything you need to blur with.

2 Likes

Thank you, have been searching everywhere for this! It works in the design screen but not in the play screen. Is there anything that I have to check?

3 Likes

1. Describe the problem your experiencing and how your idea helps solve this
As noticed by @Mastro on the FoF Discord, when adding an overlay with the Background Blur effect, we lose the effect as overlays go to a default white background and make it so the transparency doesn’t work.
If you remove the effect from the frame, transparency goes back to normal.
If you try and make a square or frame inside the overlay frame to apply said background blur, while the frame doesn’t have a fill, only the transparency works, not the background blur.

It would be great if we could just remove that default background and make it work like everywhere else.

2. Add as much context as possible (screenshots, Figma files, mockups, etc.)

3. Ask questions to bring the community into the conversation
(e.g. Does anyone else experience this? Is anyone using a plugin or workaround to help solve this?, etc.

Who has found this to happen to them too?

2 Likes

Any insight into when this bug might be fixed @anon21722796 ? Looks like it has been about a year since this thread opened and we are still experiencing this issue.

6 Likes

Hello! I was prototyping an app for a client and came across the same problem, any update on when this will be implemented? Thanks!

Figma should add a blur option here, in the same way it let’s you select the background-color and opacity.


I’ve run into this problem multiple time’s when I have multiple modals for the same page.

2 Likes

Adding this feature would be incredible. I’ve had to create hacks for a few years to make this work (e.g. create a middle-tween-screen, toss a screenshot of the intended BG after I make a normal background blur on it, then apply the overlay effect). What’s annoying is that it eliminates the efficiency of using an overlay because I have to do this for every screen that shared overlay sits over.

When handing off to dev teams, these details matter and it’s a monumental waste of time to have to do it manually

I’ve been having the same issue. Has anyone found a solid workaround for this yet? Any update on when we might see this functionality baked into Figma?@Figma_Support