Wie ein Liquid-Glass-Würfel im Text sitzt

Der rote Würfel weiter unten ist aus echtem CSS-Glas — mit `backdrop-filter`, Distortion und denselben Inset-Highlights wie die Buttons der Kanzlei-Site. Beim Scrollen kippt er sanft, du siehst ihn von leicht oben, dann frontal, dann von leicht unten.

Hinter ihm liegt ein dezentes Linien-Muster — damit beim Durchschauen sichtbar wird, dass das Glas wirklich verzerrt. Auf einem leeren cremefarbenen Untergrund würdest du den Glas-Effekt gar nicht erkennen.

Scroll runter — gleich kommt er.

Abb. 1 — Würfel aus rotem Liquid-Glass.

Und weiter im Text

Du bist jetzt am Würfel vorbei. Anders als bei der WebGL-Variante schimmert hier der DOM-Inhalt durch das Glas durch — Schatten, Highlights und das Linien-Muster werden vom SVG-Distortion-Filter leicht verzerrt.

Scroll auch wieder hoch, der Effekt funktioniert in beide Richtungen.