I think "tons of code and maintenance" is an exaggeration for this effect, once it's done you'll rarely have to come back to it.
Many people value creating and using products with these kinds of details, I disagree with "don't use this in projects you intend to maintain" as across-the-board advice.
I disagree. Check the changes required to the spacing/sizing. Soon you will need to adjust those values and that.is.maintenance. Multiply this by each detail and soon you have more work than you signed up for. This is usually when someone comes along and wants a rewrite because the codebase is fragile.
If you're using a CSS preprocessor like SCSS or LESS you can just define the height for the toolbar as a variable and then use the mask area for the blur as a multiplier (eg. 1.88) of that variable. In general for making things easy.to.maintain it's better to not build project-wide stylesheets with raw CSS.
It's not universally safe to use CSS nesting yet. Without nesting support, writing raw CSS is like raw-dogging a sex-trafficked Vietnamese prostitute from Malaysia. Sure, it will probably work, but if your goal is zero maintenance then you're ignoring the post-exposure prophylaxsis and antibiotic regimens necessary for typical usage patterns.
> I disagree with "don't use this in projects you intend to maintain" as across-the-board advice
Backdrop-filter is... fine. Using masks, animations, and backdrop filter, and gradients, especially for fine details like edges, are just asking for trouble.
Browsers are incredibly complicated, and rendering engines have lots of edge cases, broken features, slight incompatibility issues some of which vary by hardware/os/enabled-flags.
I’m at the point in my career where if it’s an internal project, zero shame for Bootstrap and JQuery. If that’s what floats your boat, do it. It’s simple, well understood, functional.
Many people value creating and using products with these kinds of details, I disagree with "don't use this in projects you intend to maintain" as across-the-board advice.