Skip to main content
Chase89
Mar 19, 2021 8:21 PM UTC

LAUNCHED: 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?

45 replies

tank666
Mar 27, 2023 1:40 PM UTC

Hey all!
Now it’s available. Presentation mode already supports background blurring for overlays.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
djv
Figmate
Community Support
Mar 29, 2023 8:56 PM UTC
Kasra_Nourani
New Member
Jun 11, 2023 1:11 PM UTC

I think there should be a blur effect option in overlay options while creating one! It could be handful sometimes alongside adding dark background & …

Feb 13, 2024 9:05 PM UTC

YES! The option to blur the entire background OR only what’s behind the overlay would be huge. The application I design uses a TON of Drawer-like components with blurs, and I can never make it look similar without building a Frame the same size as the current working Frame that instant appears AND having the Drawer slide-in directionally on top of that Frame. It’s a messy & hacky solution.

Elvis3
New Member
Apr 17, 2024 1:35 PM UTC

Yes, we need this functionality badly!