glass
displacement

How do you create backdrop displacement with HTML and CSS? SVG. The idea is that you need a displacement map that distorts the input image. In this case, the backdrop of our element (whatever is underneath).

Check the "debug" option to see the displacement map used and play with the options. The red and blue of the displacement map displaces the backdrop. The caveats? You need to update the map image whenever the shape of the element changes. The big one? backdrop-filter: url() currently only works in Chromium and not Gecko/Webkit.

Glass adjusts for different surfaces and use cases.
Try different modes or freestyle it in "free" mode.

That's it. Go forth and play with SVG filters.
But maybe do it in Safari and Firefox first.