LAUNCHED: Dynamic background blur in overlays

[Chase89]

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:

What’s happening:

3. 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?

[Kei]

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.

[Ian_Hong]

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?

[Bruno_Figueiredo]

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?

[Jeremy_Dennis]

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.

[GABRIELE_MOTTER]

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

[owilliams]

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.

[Ashwin_Khurana]

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

[Chrissy_Pipetti]

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

[carsonhart]

I agree this desperately needs an update! Please Figma @Figma_Support

[andraspii]

This feature is a must have @Figma_Support. Good that we have background blur, but you we can’t use it as an overlay background in prototype. (blur will be removed during Presentation)

[Jeff_Mendoza]

any updates on this?

[Lili_Lin]

Also have a problem with this. NEED background blur working in prototype+overlays. @Figma_Support super thanks!

[Dogukan_Yazici]

I am waiting this feature too. I hope they will bring.

[Timotej_Majersky]

Did you submit this as an idea?

[Jeremy_Dennis]

Any updates? Almost 2 years now and still nothing?

[Tsvetan_Kolev]

@Figma_Support any idea to implement this feature soon? It is actually needed for proper modal display. Instead of just overlay with opacity we may have also blurred background with level of blurring added.

[Mateus_Fernandes_Vargas_Riveir]

C’mon @Figma_Support, let’s do it! I’ve never asked something before.

[Aen]

We need this.

[Nathan_Snelgrove]

I want this. When you need it, you need it. @Figma_Support, @owilliams has the best possible solution for this. Please make it happen!