Apple introduced Liquid Glass, essentially a light-refracting effect, to create the illusion that the bounding box is a thin piece of high-refractive glass with a rounded-over/tapered/bullnose edge.

I'd like to start a discussion on what it would take for CSS to replicate this effect.

Existing:
Blur:
backdrop-filter: blur is fine for replicating a frosted glass look

Rounded Shape:
border-radius and svgs are fine for controlling the painted shape

Rim Highlights/Shadows:
Fairly sure stacked box-shadows can replicate that, and/or pseudo elements with mix-modes, etc.

Needed:
Refraction:

• Although refraction is a common visual effect that likely deserves its own function, I'd prefer to propose a lower-level approach that can be used for a wider range of open-ended effects.
• Proposing an offset() function for backdrop-filter, where you describe a translation offset per edge. For each to-be painted pixel, the engine would apply the spatial translation to find which pixel to use as source colour. An offset is not enough to simulate refraction, as there's no ray stretching/compression; that's handled by the next new property below. If there's no border-radius set, the corners would have sharp transitions, like a typical border/bevel/faceted crystal. With a border-radius set, the translation is interpolated as expected.
  Example Syntax:
  backdrop-filter: offset(-10px, -5px); // source pixel is -10px/-5px offset from destination pixel; negative allows the source pixel to be outside the element's bounding box. For this example, the corners would have a hard transition and pixels from the center of what's behind the element are missing (weren't sampled because of the negative offset).

Reflection:

• Only really makes sense with 3D objects and oblique surfaces that send rays to the user, but I can imagine a simple case where a user might want the inner edge of a sidebar to softly reflect the scrolling body content, a carousel could want reflections in various ways, etc. In this case, it's really a mirror 'flip' effect.
  Example Syntax:
  backdrop-filter: mirror(10deg 20deg 30deg 40deg); // assumes each edge is an on-edge mirror, the angle tilts the 'mirror' towards the box center. Perhaps a second number that's basically a border inset amount to clip the reflection.

Falloff:

• Currently, backdrop-filter applies its effect uniformly across the element bounds. Being able to scale the effect from the edge/center would unlock a range of pleasing effects.
  Example Syntax:
  backdrop-filter-falloff:
  < optional 'bounds' / 'square': default 'bounds' >
  < optional max intensity multiplier: default 1 >
  < optional min intensity multiplier: default 0 >
  < falloff description: {inset size: number+unit} {curve: cubic-bezier() OR linear} >
• You could have multiple space-separated falloffs in a single declaration, their effects are stacked (multiplied). Comma-separated would be reserved for applying the falloff to the same-index backdrop-effect (like background-image and co).
• the start of the curve/linear is assumed max, the end the min (profile philosophy); normalized to a 1-0 multiplier on the actual paint effect; the leading max/min multipliers are applied on top of these.
• The min point is the box center of the element; but being able to translate that center could be interesting.
• 'square' would treat the element box as though it was a square (same center), masked to the actual paint region. Not essential but I can imagine some interesting effects.

Notes:

• Reflecting

Later, I might write up a simulation of these properties via canvas pixel manipulation to verify the final appearance.