Efecto Liquid Glass en CSS
Superficies de vidrio esmerilado, distorsionado o cromático: arrastra la tarjeta para ver la refracción y copia CSS listo para producción.
La refracción de lente funciona en navegadores basados en Chromium; Safari y Firefox muestran en su lugar un desenfoque esmerilado.
Arrástrame: el vidrio refracta todo lo que hay detrás.
Cómo funciona el generador de Liquid Glass
Diseña de forma visual superficies inspiradas en Liquid Glass (esmerilado, distorsión, refracción cromática) y copia CSS listo para producción.
Tres modos de renderizado
“Esmerilado” es glassmorphism con CSS puro que funciona en todas partes, incluido Safari. “Líquido” añade distorsión con ruido SVG para lograr ondas de vidrio mojado. “Lente” crea un mapa de refracción cromática para el aspecto más cercano a Liquid Glass.
Distorsión por ruido
Una textura procedural feTurbulence desplaza el fondo desenfocado: la frecuencia controla el tamaño de las ondas y la intensidad, cuánto se curva la luz.
Vista previa arrastrable
La tarjeta de vidrio flota sobre una escena colorida: arrástrala para ver cómo el material refracta los distintos contenidos que tiene detrás.
Código para producción
Cada modo exporta código completo, listo para pegar: la clase CSS y, cuando hace falta, el filtro SVG, con alternativas -webkit- para Safari.
Preguntas frecuentes
Un lenguaje de materiales dinámico popularizado por Apple: superficies translúcidas que desenfocan, saturan y refractan sutilmente el contenido que tienen detrás, con bordes interiores brillantes y una profundidad suave. En la web se imita con backdrop-filter y filtros SVG.
“Esmerilado” para todo lo crítico: funciona en todos los navegadores modernos. “Líquido” se degrada con elegancia: los navegadores que no pueden aplicar el filtro SVG siguen mostrando el desenfoque esmerilado. “Lente” es una demostración solo para Chromium; conserva la línea alternativa con -webkit- para Safari.
El mapa de refracción es un degradado SVG codificado a la medida del elemento: le indica al filtro de desplazamiento dónde están los bordes. Si cambias el tamaño del elemento, vuelve a generar el código con el ancho y el alto correspondientes.
El desenfoque y la saturación los compone la GPU y son ligeros si se aplican a pocos elementos. Los filtros de desplazamiento son más pesados: evita animarlos en superficies grandes y limítate a uno o dos paneles de vidrio por vista.