Backdrop Filter

Check out the MDN for how to use.

.el {
  margin: auto;
  width: 300px;
  height: 300px;
  background: rgba(0,0,0,0.02);
  cursor: move;
  box-shadow: 2px 2px 16px -8px black, 0 0 4px 24px inset rgba(0,0,0,0.06);
  backdrop-filter: blur(4px) grain(0.04) pixelate(4px) hue-rotate(-25deg);
}

Notes

• The backdrop is the frame as it stands when the element is drawn, so the filter only sees what is behind it — anything drawn after it is unaffected, as on the web.
• The built-in pipeline reads the backdrop with a GrabPass, which copies the screen as it stands. A scriptable pipeline has none, so the backdrop is rendered instead: the camera draws the frame again with the element and everything after it left out. That is one extra render per element that reads a backdrop, so a screen with many of them costs accordingly.
• That render is kept between frames, and taken again only when something painted before the element has changed inside the part of the screen the element reads. An animation over a frosted panel therefore costs the panel nothing, while one behind it is read every frame, and a panel scrolled out of the frame costs nothing at all until it comes back.
• What is watched to decide that is the canvas: where each element is, how large it is, whether it is drawn, and when it rebuilds. Anything else the camera draws — a 3D scene behind the UI — cannot be watched that way, so an element with such geometry behind it is taken again every frame. A RenderTexture whose contents an external script rewrites is the one case nothing notices; move it, or toggle it, to say so.
• Rendering the backdrop needs a camera whose output the element is part of, which a ScreenSpaceOverlay canvas has not got — it is drawn after every camera has finished. Under a scriptable pipeline an element on an overlay canvas falls back to the camera’s opaque texture, which holds the 3D scene but no UI, and is downsampled according to the render pipeline asset’s Opaque Downsampling setting.