In case it helps, here are some old pens showing how:
Here it is applied in Lume:
Here’s the next problem we need to solve with more layering (the sphere is not visible behind the transparent element):
If it uses a subset of CSS features, a simple solution is to copy it to a texture via the SVG foreignObject trick (but this is slow for animation, requires uploading new texture every frame).
We really need a custom shader instead of the simple blend mode trick, so we can make the lighting and shadow look better.
Nite that if you want to support WebXR, regular CSS content will not transfer over to the headset (only WebGL, no CSS). For that, the texture trick will be needed (with performance limitation in mind), or just make UI purely with WebGL content (or WebGPU once that is widely supported).
Curious to see what you come up with!