How to use background blur
Enabling the background blur feature.
Background blur is a special kind of blur extensively used on macOS that takes the contents of what’s drawn behind it and applies a special kind of blur. The effect is much like a frosted window.
The effect is implemented in browsers as css backdrop filter. Before you use it, you should realize a few things:
It’s not implemented perfectly across all browsers. Apart from the fact that some simply don’t have it, they have very visual differences, mainly how they treat the edges.
Background blur kills almost always kills scroll and animation performance. Because the rendering involves multiple layers it has to bail out of GPU acceleration.
Performance is very different across browsers. Safari can be okay, Chrome typically slows down an unreasonable amount and Firefox just chokes.
Because we saw simple blurs make entire canvases slow, we put it behind an explicit setting. You can find it under View → Show Background Blur.
