Backdrop-filter as Background Option #64989
Description
What problem does this address?
Adding light weight way to style a website without the need for images to achieve effects.
This filters come with one line of code and can make big effects.
I guess not all possible values are candidates for the first version. I think blur, invert, greyscale are good first items.
https://www.w3schools.com/cssref/playdemo.php?filename=playcss_backdrop-filter
What is your proposed solution?
Adding an other tab "Filters" to the background styling components:
Adding a dropdown to pick a filter type: blur, invert, greyscale and a input field to set the effect strength.
Activity
Rishit30G commentedon May 12, 2025
Thanks for sharing this great suggestion!
I believe there are several considerations to take into account, as shown in the screencast. I used a cover block to demonstrate them such as color opacity, changes in the color swatch, etc. We could implement this as a separate plugin instead of adding it natively, imo. Ref: #68465 (comment)
Screen.Recording.2025-05-12.at.10.18.32.AM.mov
jobthomas commentedon Dec 9, 2025
Just contributing here after a quick chat with @jasmussen
I think it would be great to add an option to blur as backdrop filter, but I'm not convinced about the proposed solution since some of the backdrop-filters are dependent on an alpha background colour, having it as alternative to
colorseems not an ideal solution.My suggested approach would be that whenever
background colorcan be defined, thatblurcan be added as a slider. Background color can still be added in that case (but it needs to have a level of alpha). While I understand that this doesn't cover the full amount of backdrop-filter options, my expectations would be that the other options like sepia (which could be addressed with the duotone option) are less popular.Here's a quick Claude-generated plugin and its effect:
background-blur-control.zip
jasmussen commentedon Dec 9, 2025
Backdrop filters feels like an obvious enhancement to bring to our tools, I'd love to see it happen.
The challenge is always one of finding a good UI for it. But one thing we learned from how box-shadow tools were brought to the editor: it's often a good idea to start theme.json first, i.e. define the semantic structure for how you create presets, and then build a UI tool to simply apply presets. Once those are validated, we can see what tooling we can bring to customization, e.g. a blur slider and a filter type dropdown, etc.
CC: @WordPress/gutenberg-design for thoughts.
t-hamano commentedon Dec 10, 2025
This is an interesting suggestion.
The tricky part about this is that even if the block itself doesn't support background color, a parent or ancestor block may have a background color. So the backdrop-filter may work in any context, and it's difficult to infer this from the block structure or support status.
Maybe we could reuse the logic from the color contrast checker to dynamically derive the background color via
getComputedStyle, and if there isn't any background color, add some help text like "The backdrop-filter might not work properly because there is no background behind the block."jobthomas commentedon Dec 10, 2025
But wouldn't it then work as expected, because it seems the background color for a parent block always shows up behind the child block. So if you only add a blur to the child and there's a solid background colour to the group, you won't actually see the blur because the parent has no alpha, but I would expect that to happen.