Gerador de Glassmorfismo Crie efeitos de vidro fosco com controle de desfoque, transparência e saturação.

O Glassmorphism depende da propriedade backdrop-filter do CSS, especificamente das funções blur() e saturate(). A backdrop-filter aplica efeitos à área atrás de um elemento, ao contrário do filter que afeta o próprio elemento. O elemento deve ter um fundo semitransparente (usando rgba ou hsla) para que o blur seja visível. O valor blur() em pixels controla a intensidade do efeito de vidro fosco - 10-20px é típico. A saturate() acima de 100% realça as cores visíveis através do vidro. A borda usa uma versão ligeiramente mais opaca da cor de fundo para definição. O box-shadow adiciona profundidade. O prefixo -webkit-backdrop-filter é necessário para Safari. Para fallback, forneça um fundo mais opaco para navegadores que não suportam backdrop-filter. Use @supports (backdrop-filter: blur(1px)) para detecção de recursos. Nota de desempenho: o backdrop-filter pode ser caro em elementos grandes ou quando empilhando múltiplas camadas embaçadas.