Add Filters panel + "Background Blur" option

Hi there guys, I’ve noticed there are a few options on the design tab that could be grouped into a single section called “Filters”, which would make things easier to organize. Here’s a quick prototype:

This new section should contain the current settings for Shadow and Layer Blur. An addition to this would be the “Background Blur” filter, which makes only the background blurred instead of the whole layer.

To transpose such effect to CSS code, you could use backdrop-filter: blur(*value in px*);. It seems most of the browsers already support it so would be a great way to get such a filter working.

11 Likes

Pretty good coverage, CSS Backdrop Filter | Can I use... Support tables for HTML5, CSS3, etc

2 Likes

i want this feature so bad, this is the only reason I’m using figma

3 Likes

Hi all
Thanks for all the amazing effort with Penpot and the great new features,
still was wondering if is there any news regarding the backdrop filter blur?

Keep up the amazing work :muscle:

Well, nothing new about this up until now, I guess…