Skip to main content
Chase89
March 19, 2021

LAUNCHED: Dynamic background blur in overlays

  • March 19, 2021
  • 45 replies
  • 25125 views

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?

45 replies

Jeff_Mendoza
June 26, 2022

any updates on this?

Lili_Lin
July 7, 2022

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

Dogukan_Yazici
July 11, 2022

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

Timotej_Majersky
July 20, 2022

Did you submit this as an idea?

Jeremy_Dennis
New Participant
July 27, 2022

Any updates? Almost 2 years now and still nothing?

Tsvetan_Kolev
July 29, 2022

@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
August 23, 2022

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

Aen
September 6, 2022

We need this.

Nathan_Snelgrove
September 13, 2022

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

Ed_Vardanyan
October 6, 2022

any updates? still doesn’t work, we need a solution @Figma_Support !