El cristal real curva,
el desenfoque solo promedia.
El desenfoque toma los píxeles detrás de tu panel y los promedia. Resultado: un rectángulo gris con película esmerilada.
El cristal desplaza cada píxel del fondo lateralmente: luz que se refracta. Eso es exactamente lo que hace este filtro SVG, en vivo, detrás de esta tarjeta.
↓ desplázate para la comparación · arrastra la lente redonda por toda la página · las olas ceden bajo ella
Mismo fondo. Dos físicas.
Ambos paneles están sobre las mismas olas que avanzan despacio. A la izquierda el aspecto estándar, a la derecha el stack completo. Fíjate en las crestas luminosas de las olas al pasar bajo los paneles.
backdrop-filter: blur(14px)
Promedio de los píxeles. Detalle perdido, contraste perdido, material perdido. Las crestas detrás se vuelven niebla: flat gray rectangle.
url(#bend) + blur(2px) + borde de 1px
Las crestas se quiebran y refractan como si un cristal grueso las cubriera. Además el borde interior blanco arriba: la cara iluminada del panel.
Gira el cristal
Los controles escriben en vivo en el filtro SVG. Cada superficie de cristal de la página (tarjetas y lente) depende del mismo #bend.
Tres ingredientes, sin framework
feTurbulencecrea una textura de ruido, la microsuperficie del cristal.feDisplacementMaplee el ruido y desplaza cada píxel del fondo lateralmente: el canal R controla X, el canal G controla Y. Esa es la refracción.- El filtro entra en
backdrop-filtermedianteurl(#bend), justo al lado de un pequeño blur. Luego un borde interior blanco de1pxcomo cara iluminada, y el div se convierte en un objeto.
<!-- 1 + 2: el panel -->
<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: el objeto */
.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);
}Aviso: backdrop-filter: url(…) con filtros SVG actualmente solo se renderiza en navegadores Chromium. Safari y Firefox muestran el fallback de desenfoque, una razón más por la que hay rectángulos grises planos por todas partes.