Uma biblioteca de efeito liquid-glass para a web, aplica refração realista de vidro, blur, aberração cromática e iluminação em qualquer elemento HTML usando shaders WebGL.
O que faz
LiquidGlass é uma biblioteca web que aplica efeitos realistas de vidro a qualquer elemento HTML usando shaders WebGL. Ela renderiza refração, blur, aberração cromática, reflexo Fresnel, destaques especulares e sombras projetadas ao rasterizar o conteúdo de fundo em um canvas oculto e processando cada painel de vidro
LiquidGlass é uma biblioteca web que aplica efeitos realistas de vidro a qualquer elemento HTML usando shaders WebGL, refração, blur, aberração cromática, reflexo Fresnel, destaques especulares multi-luz, um contorno rim interno e sombra projetada. O funcionamento consiste em rasterizar os filhos não-vidro de um contêiner raiz em um canvas oculto (conteúdo estático é armazenado em cache, enquanto elementos marcados com data-dynamic ou qualquer vídeo são recapturados a cada quadro), depois recortando a cena atrás de cada painel de vidro e processando-a em um fragment shader, com composição em camadas para que painéis empilhados se refracionem mutuamente.
A inicialização é feita com LiquidGlass.init({ root, glassElements }), e cada painel pode ser ajustado por meio de um data-config rico por elemento: blur, refração, aberração cromática, destaque de borda, especular, Fresnel, raio de canto, profundidade de bisel, matiz, saturação, brilho, sombra, além dos modos interativos de flutuação (arrastar para mover) e botão. A biblioteca relê a configuração via MutationObserver, expõe um contador de FPS e um escape markChanged() para conteúdo que ela não consegue observar, reimplementa as regras de contexto de empilhamento CSS para a ordem de pintura, e pode ser instalada via npm ou importada diretamente de uma CDN.
Recursos
Notas de campo
Revisado em Jun 21, 2026
Ideal para
Resultados para quem cria
Atenção
Testado com
Custo
Gratuito e de código aberto.
Ferramentas usadas
Ele aplica efeitos realistas de vidro, refração, blur, aberração cromática, reflexo Fresnel, destaques especulares e sombra projetada em qualquer elemento HTML usando shaders WebGL.
Instale via npm (ou importe de uma CDN), chame LiquidGlass.init com um contêiner raiz e seus elementos de vidro, e configure cada painel com um JSON data-config de opções como refração, blur e raio de canto.
Sim. A biblioteca usa composição em camadas e reimplementa as regras de empilhamento CSS, para que um painel de vidro acima de outro o enxergue em sua refração; os elementos de vidro devem ser filhos diretos da raiz.
Uma biblioteca de componentes glassmórficos inspirada na Apple, construída sobre shadcn/ui e Base UI, com componentes estilizados em vidro prontos para uso (alert, button, card, calendar, popover, sidebar e mais), instaláveis via o registro do shadcn.
Best for Adicionar UI com glassmorphism a um projeto shadcn/uiUm efeito animado de metal líquido em WebGL para React. Envolva um botão, chip ou ícone para adicionar um anel metálico em tempo real, com presets, temas, intensidade ajustável e reflexo de proximidade opcional em elementos vizinhos.
Best for Um destaque WebGL metálico premium em botões ou ícones principaisUma coleção interativa de transições CSS reutilizáveis e prontas para copiar, incluindo redimensionamento de cards, animações de modais e menus, pop de badges e muito mais, cada uma emitindo um snippet autocontido com um guard de reduced-motion.
Best for Adicionar micro-interações refinadas sem uma biblioteca de motionUma galeria leve de animações de carregamento baseadas em curvas matemáticas - curvas rosa, figuras de Lissajous, hipotrocoides, cardioides e muito mais - construída com HTML, CSS e JavaScript puros, com notas de fórmulas e código copiável.
Best for Animações de carregamento distintas e orientadas por matemáticaUma ferramenta gratuita para navegador, sem cadastro, que transforma fotos e vídeos em arte ASCII e outros 12 estilos - pixel art, voxel, mosaico, meios-tons, glitch, LEGO e mais - com visualização em tempo real, efeitos de pós-processamento retrô e exportação em até 4x de resolução.
Best for Transformar fotos ou vídeos em arte ASCII e retrôVisual 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