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.

Supercharge your business site.
  • 99.99% uptime

  • Dedicated IP address

  • Unlimited pages

  • Proxy support

  • Custom onboarding

  • Unlimited viewers

  • Invoicing

  • Custom terms

  • Security reports

  • Single sign-on

  • Canonical URL

  • User roles

  • Office hours

  • Performance audit

  • SEO audit

  • Advanced DDoS protection

  • Custom agreements

Framer UI
Supercharge your business site.
  • 99.99% uptime

  • Dedicated IP address

  • Unlimited pages

  • Proxy support

  • Custom onboarding

  • Unlimited viewers

  • Invoicing

  • Custom terms

  • Security reports

  • Single sign-on

  • Canonical URL

  • User roles

  • Office hours

  • Performance audit

  • SEO audit

  • Advanced DDoS protection

  • Custom agreements

Framer UI
Supercharge your business site.
  • 99.99% uptime

  • Dedicated IP address

  • Unlimited pages

  • Proxy support

  • Custom onboarding

  • Unlimited viewers

  • Invoicing

  • Custom terms

  • Security reports

  • Single sign-on

  • Canonical URL

  • User roles

  • Office hours

  • Performance audit

  • SEO audit

  • Advanced DDoS protection

  • Custom agreements

Framer UI