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

tank666
March 27, 2023

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
March 29, 2023
Kasra_Nourani
New Member
June 11, 2023

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

February 13, 2024

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
April 17, 2024

Yes, we need this functionality badly!