Una biblioteca de efecto liquid-glass para la web: aplica refracción de vidrio realista, desenfoque, aberración cromática e iluminación a cualquier elemento HTML mediante shaders WebGL.
Qué hace
LiquidGlass es una biblioteca web que aplica efectos de vidrio realistas a cualquier elemento HTML mediante shaders WebGL. Renderiza refracción, desenfoque, aberración cromática, reflexión Fresnel, resaltes especulares y sombras paralelas rasterizando el contenido de fondo sobre un canvas oculto y procesando cada panel de vidrio
LiquidGlass es una biblioteca web que aplica efectos de vidrio realistas a cualquier elemento HTML mediante shaders WebGL, con refracción, desenfoque, aberración cromática, reflexión Fresnel, resaltes especulares multiluz, un borde interior rim y una sombra paralela. Funciona rasterizando los hijos no vidrio de un contenedor raíz sobre un canvas oculto (el contenido estático se cachea, mientras que los elementos marcados con data-dynamic o cualquier video se recapturan en cada fotograma), luego recorta la escena detrás de cada panel de vidrio y la procesa mediante un fragment shader, con composición en capas para que los paneles apilados se refracten entre sí.
Se inicializa con LiquidGlass.init({ root, glassElements }) y cada panel se ajusta a través de un completo data-config por elemento: blur, refraction, chromatic aberration, edge highlight, specular, Fresnel, corner radius, bevel depth, tint, saturation, brightness, shadow, además de modos interactivos de flotación (drag-to-move) y botón. Vuelve a leer la configuración mediante un MutationObserver, expone un contador de FPS y una vía de escape markChanged() para el contenido que no puede observar, reimplementa las reglas de stacking-context de CSS para el orden de pintura, y puede instalarse desde npm o importarse directamente desde un CDN.
Características
Notas de campo
Revisado el Jun 21, 2026
Ideal para
Resultados para creadores
Ten cuidado
Probado con
Costo
Gratuito y de código abierto.
Herramientas usadas
Aplica vidrio realista, refracción, desenfoque, aberración cromática, reflexión Fresnel, resaltes especulares y una sombra paralela a cualquier elemento HTML mediante shaders WebGL.
Instálalo desde npm (o impórtalo desde un CDN), llama a `LiquidGlass.init` con un contenedor raíz y tus elementos de vidrio, y configura cada panel con un JSON `data-config` de opciones como refraction, blur y corner radius.
Sí. Utiliza composición en capas y reimplementa las reglas de stacking de CSS, de modo que un panel de vidrio situado sobre otro lo ve en su refracción; los elementos de vidrio deben ser hijos directos del contenedor raíz.
Una biblioteca de componentes con glassmorfismo inspirada en Apple, construida sobre shadcn/ui y Base UI, con componentes de estilo glass listos para usar (alert, button, card, calendar, popover, sidebar y más) instalables mediante el registro de shadcn.
Best for Añadir UI con glassmorfismo a un proyecto shadcn/uiUn efecto animado de metal líquido con WebGL para React; envuelve un botón, chip o icono para darle un anillo de metal en tiempo real, con presets, tematización, intensidad ajustable y reflejo de proximidad opcional en elementos vecinos.
Best for Un acento de metal WebGL premium en botones o iconos claveUna colección interactiva de transiciones CSS reutilizables y listas para copiar: redimensionado de tarjetas, animaciones de modales y menús, aparición de insignias y más, cada una con un fragmento autocontenido que incluye una protección para movimiento reducido.
Best for Añadir microinteracciones pulidas sin una biblioteca de movimientoUna galería ligera de animaciones de carga basadas en curvas matemáticas: curvas de rosa, figuras de Lissajous, hipotrocoides, cardioedes y más, construida en HTML, CSS y JavaScript puro con notas de fórmulas y código listo para copiar.
Best for Animaciones de carga distintivas impulsadas por matemáticasUna herramienta de navegador gratuita y sin registro que convierte fotos y videos en arte ASCII y otros 12 estilos: pixel art, voxel, mosaico, semitono, glitch, LEGO y más, con vista previa en tiempo real, efectos de posprocesamiento retro y exportación de hasta 4x de resolución.
Best for Convertir fotos o video en arte ASCII y retroVisual RAG pipeline that retrieves over screenshot tiles instead of parsed text, preserving tables, charts, and layout for more accurate document search.
Best for Builders doing RAG over documents where tables, charts, or layout carry meaning that HTML parsing silently drops