Echtes Glas biegt,
Blur mittelt nur.
Blur nimmt die Pixel hinter deinem Panel und bildet den Durchschnitt. Ergebnis: graues Rechteck mit Milchfolie.
Glas verschiebt jeden Backdrop-Pixel seitwärts: Licht, das gebrochen wird. Genau das macht dieser SVG-Filter hier, live, hinter dieser Karte.
↓ scrollen für den Vergleich · die runde Linse kannst du frei über die Seite ziehen, die Wellen weichen ihr aus
Gleicher Hintergrund. Zwei Physiken.
Beide Panels liegen über denselben ruhig laufenden Wellen. Links der Standard-Look, rechts der volle Stack. Achte auf die leuchtenden Wellenkämme, wenn sie unter den Panels durchziehen.
backdrop-filter: blur(14px)
Durchschnitt der Pixel. Detail weg, Kontrast weg, Material weg. Die Wellenkämme dahinter werden zu Nebel: flat gray rectangle.
url(#bend) + blur(2px) + 1px Kante
Die Wellenkämme knicken und brechen, als läge dickes Glas darüber. Dazu die weiße Innenkante oben: die beleuchtete Stirnseite der Scheibe.
Dreh am Glas
Die Regler schreiben live in den SVG-Filter. Jede Glasfläche auf der Seite (Karten und Linse) hängt am selben #bend.
Drei Zutaten, kein Framework
feTurbulenceerzeugt eine Rausch-Textur: die Mikro-Oberfläche der Glasscheibe.feDisplacementMapliest das Rauschen und verschiebt jeden Backdrop-Pixel seitwärts: R-Kanal steuert X, G-Kanal steuert Y. Das ist die Lichtbrechung.- Der Filter kommt per
url(#bend)in denbackdrop-filter, direkt neben einen kleinen Blur. Dann eine1pxweiße Innenkante als beleuchtete Stirnseite, und aus dem div wird ein Objekt.
<!-- 1 + 2: die Scheibe -->
<svg width="0" height="0">
<filter id="bend">
<feTurbulence type="fractalNoise" baseFrequency="0.012 0.016"
numOctaves="2" result="noise"/>
<feGaussianBlur in="noise" stdDeviation="2" result="soft"/>
<feDisplacementMap in="SourceGraphic" in2="soft" scale="90"
xChannelSelector="R" yChannelSelector="G"/>
</filter>
</svg>
/* 3: das Objekt */
.glass {
backdrop-filter: url(#bend) blur(2px) saturate(1.6);
border: 1px solid rgba(255,255,255,.35);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.65), /* lit edge */
inset 0 -1px 0 rgba(255,255,255,.12),
0 24px 60px rgba(0,0,0,.45);
}Heads-up: backdrop-filter: url(…) mit SVG-Filtern rendert aktuell nur in Chromium-Browsern. Safari & Firefox zeigen den Blur-Fallback, noch ein Grund, warum überall flache graue Rechtecke rumstehen.