Efeito Liquid Glass em CSS
Superfícies de vidro foscas, distorcidas ou cromáticas — arraste o card para ver a refração e copie CSS pronto para produção.
A refração de lente funciona em navegadores Chromium; no Safari e no Firefox, aparece o desfoque fosco comum.
Arraste-me — o vidro refrata o que estiver atrás.
Como o gerador de Liquid Glass funciona
Crie superfícies inspiradas no Liquid Glass visualmente — efeito fosco, distorção, refração cromática — e copie CSS pronto para produção.
Três modos de renderização
“Fosco” é glassmorphism em CSS puro, que funciona em qualquer lugar, inclusive no Safari. “Líquido” adiciona distorção com ruído SVG para uma ondulação de vidro molhado. “Lente” cria um mapa de refração cromática — o mais próximo do visual Liquid Glass.
Distorção com ruído
Uma textura procedural feTurbulence desloca o fundo desfocado — a frequência controla o tamanho das ondulações, e a intensidade, o quanto a luz se curva.
Prévia arrastável
O card de vidro flutua sobre uma cena colorida — arraste-o para ver como o material refrata conteúdos diferentes atrás dele.
Código para produção
Cada modo exporta código completo, pronto para colar: a classe CSS e, quando necessário, o filtro SVG, com fallbacks -webkit- para o Safari.
Perguntas frequentes
Uma linguagem de materiais dinâmica popularizada pela Apple: superfícies translúcidas que desfocam, saturam e refratam sutilmente o conteúdo atrás delas, com bordas internas brilhantes e profundidade suave. Na web, ela é reproduzida com backdrop-filter e filtros SVG.
“Fosco” para tudo o que for crítico — funciona em todos os navegadores modernos. “Líquido” degrada com elegância: navegadores que não aplicam o filtro SVG ainda mostram o desfoque fosco. “Lente” é uma vitrine só para Chromium; mantenha a linha de fallback -webkit- para o Safari.
O mapa de refração é um gradiente SVG codificado no tamanho do elemento — ele indica ao filtro de deslocamento onde ficam as bordas. Se você mudar o tamanho do elemento, gere o código de novo com a largura e a altura correspondentes.
Desfoque e saturação são processados pela GPU e saem baratos em poucos elementos. Filtros de deslocamento são mais pesados — evite animá-los em superfícies grandes e prefira um ou dois painéis de vidro por tela.