Join the Webstudio community

Updated last year

Add CSS "Filter" Property

At a glance

The community member who posted the original post mentions needing a CSS feature similar to backdrop-filter but that applies to the element itself rather than the background behind it. They provide a link to the Mozilla Developer documentation on the filter property.

The comments from other community members express interest in this feature, with one suggesting the use of filter and transform properties for simple translations. Another community member notes that a YouTuber recently struggled to achieve a blur effect, but was able to do so using AI. Additionally, a community member comments that the current backdrop-filter implementation is not fully implemented and requires typing a CSS function, suggesting that they could add the same functionality relatively quickly or build a multi-layer UI.

Useful resources
I run into the need for this fairly often. Might be a quick win given it's basically the same as backdrop filter but applies to the element, not behind it

https://developer.mozilla.org/en-US/docs/Web/CSS/filter
J
D
O
5 comments
I would also use this.
filter and transform property for simple translates would be great too
blur was the first thing a youtuber was trying to do the other day and couldn't lol. this was painful, luckily they did it with AI
current backdrop filter is also not really implemented fully, it was a quick version, requires to type a css function, I can add the same relatively quickly or we build the multi-layer UI right away
Add a reply
Sign up and join the conversation on Discord