Figma Support Forum

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?

1 Like