Glassmorphism é uma tendência de design de UI que cria uma textura de vidro fosco tornando o fundo semitransparente e aplicando um efeito de desfoque (backdrop-filter: blur()). É amplamente adotado no macOS/iOS da Apple e no Windows Fluent Design System.

Com esta ferramenta, você pode aplicar 12 tipos de predefinições com um clique e ajustar individualmente as 4 funções de backdrop-filter: desfoque, brilho, saturação e contraste. Você também pode ajustar bordas, sombras e cantos arredondados com controles deslizantes, e copiar o código no formato CSS ou variável CSS.

backdrop-filter: blur()

Desfoca a área atrás do elemento. Quanto maior o valor, mais forte o efeito de vidro fosco. Esta é a propriedade central do Glassmorfismo.

backdrop-filter: brightness()

Ajusta o brilho do fundo. 100% é o padrão. 200% o torna duas vezes mais brilhante e 0% o deixa totalmente escuro.

backdrop-filter: saturate()

Ajusta a saturação do fundo. 100% é o padrão. 0% o torna monocromático e 200% o torna uma cor viva hipersaturada.

backdrop-filter: contrast()

Ajusta o contraste do fundo. 100% é o padrão. Aumentar o valor enfatiza a diferença entre claro e escuro.

Prefixo do fornecedor

Recomenda-se incluir -webkit-backdrop-filter para compatibilidade com o Safari. É incluído automaticamente no código gerado por esta ferramenta.

Q. O backdrop-filter é compatível com todos os navegadores?

A. É compatível com as versões mais recentes dos principais navegadores, como Chrome, Edge, Safari e Firefox. O IE11 não é compatível, mas recomenda-se um design de fallback usando apenas uma cor de fundo semitransparente.

Q. Qual é a diferença entre Neumorfismo e Glassmorfismo?

A. O Glassmorfismo usa backdrop-filter para criar um efeito de 'vidro fosco', representando a sobreposição de elementos (eixo Z). O Neumorfismo usa o contraste de luz e sombra do box-shadow para representar 'relevos'.

Q. Isso afeta o desempenho?

A. Como o backdrop-filter usa composição por GPU, o uso moderado não é um problema. No entanto, aplicar altos valores de blur à página inteira pode reduzir a taxa de quadros.

Q. Posso usar o código gerado como está?

A. Sim. Basta colar o CSS copiado em sua folha de estilo para aplicá-lo. Você pode alterar o nome da classe conforme necessário.