Translucent background on Vision Pro/Safari

Question

I'd like to make a website that seamlessly blends with Vision Pro UI. I want the background of my website to look similar to the the system settings windows. Does anyone know if it's possible to make a truly transparent/translucent background that will inherit the blurred look on the OS level?

I've already tried background: transparent.

Answer 1

Yes, you can use backdrop filter on the body(blur in value) with the background color in rgba like this:

.my-class {
   backdrop-filter: blur(10px);
}