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.
Beeper
Cursor
Screen Studio
Raycast
Photos
Signal
Spotify
Brave
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.