Gerador de CSS Glassmorphism

 (ui.glass)
7 pontos por xguru 2021-08-29 | 2 comentários | Compartilhar no WhatsApp

  • Tendência de design de UI usada no macOS BigSur / Windows 11

  • Exibe o plano de fundo do elemento superior como uma forma desfocada da imagem/cor/padrão que está abaixo

→ uso de backdrop-filter: blur()

  • Permite definir imagem/cor/gradiente de fundo e ajustar o valor de blur, transparência e saturação

Leituras relacionadas

2 comentários

 
galadbran 2021-08-29

Eu achei estranho porque, por mais que eu mudasse os valores de blur e saturation, nada parecia mudar; mas no Edge funciona direitinho, e no Firefox não... haha
 
joyfui 2021-08-29

Eu também uso o Firefox, então fiquei me perguntando qual era a diferença, mas pelo visto o Firefox ainda não tinha suporte padrão para isso..

https://developer.mozilla.org/ko/docs/Web/CSS/backdrop-filter

Parece que funciona se você alterar a configuração no about:config.