Generador de morfismo de vidrio

filtro de fondo: desenfoque() es la propiedad CSS detrás de la apariencia de vidrio esmerilado: un panel translúcido que difumina todo lo que se mueve detrás de él en lugar de simplemente desvanecer un color plano. El problema es que la calidad del desenfoque es casi imposible de juzgar en comparación con una muestra estática; Solo resulta convincente una vez que algo realmente se mueve debajo de él, como lo haría en una página real con contenido, video o un héroe animado. Este generador coloca la tarjeta de vista previa sobre un fondo genuinamente animado en lugar de uno fijo, por lo que lo que ve mientras arrastra los controles deslizantes es lo que los visitantes realmente experimentarán.

El fondo es una animación CSS real: un gran degradado lineal pintado al 400% del tamaño del elemento, con @keyframes cambiando su posición de fondo hacia adelante y hacia atrás en un bucle; sin bucle de animación JavaScript, sin lienzo, solo la misma técnica continua de posición de fondo utilizada en las secciones de héroe de producción. El desenfoque, el color y la opacidad del tinte, el color/opacidad/ancho del resaltado del borde, el radio de las esquinas y la suavidad de las sombras impulsan los estilos en vivo de la tarjeta flotante, y el cuadro CSS copiable refleja exactamente los mismos valores.

No todos los navegadores admiten el filtro de fondo, por lo que el generador también emite un bloque @supports not (backdrop-filter: blur(1px)) real; no es un gesto simbólico, sino una regla alternativa con su propio color de fondo calculado a partir de su opacidad de tinte real. Debido a que la translucidez sin desenfoque se ve notablemente peor (lo que hay detrás se muestra sin desenfoque), el respaldo eleva automáticamente el canal alfa por encima de la opacidad de tinte elegida, y un comentario en el CSS generado explica exactamente por qué y en qué medida.

Todo se calcula y representa en su propio navegador: sin carga, sin cuenta, sin ida y vuelta al servidor. Copie el CSS una vez que la tarjeta se vea bien, suéltelo en cualquier elemento que desee colocar encima de una foto, video o degradado, y mantenga el bloque @supports para que los navegadores más antiguos aún obtengan una tarjeta más legible y opaca en lugar de una apenas visible.