Página de login com efeito vidro com HTML e CSS

Neste tutorial você vai aprender como é fácil criar uma página de login muito bonita com um efeito de vidro usando CSS.

Assista o vídeo e aprenda.

O grande truque para criar esse tipo de efeito está na propriedade CSS backdrop-filter.

A propriedade CSS backdrop-filter é usada para aplicar um efeito de desfoque, descoloração ou outros efeitos visuais em um elemento que está por trás do elemento atual. Ela pode ser usada em conjunto com a propriedade background-color ou background-image para criar efeitos de transparência e suavidade em elementos, como modais, menus e barras laterais.

O efeito backdrop-filter é aplicado ao plano de fundo do elemento, incluindo seu conteúdo, mas não afeta a área do elemento onde o conteúdo é exibido. Isso permite que o efeito seja aplicado em elementos com conteúdo opaco, sem afetar a legibilidade do texto ou dos elementos dentro do contêiner.

O suporte ao backdrop-filter varia entre navegadores e sistemas operacionais. Alguns navegadores só oferecem suporte a efeitos de desfoque, enquanto outros suportam desfoque, saturação, brilho, contraste e outras opções de efeitos visuais. Por isso, é importante verificar a compatibilidade do navegador antes de usar essa propriedade em um projeto.

Veja alguns exemplos de uso da propriedade CSS backdrop-filter

Para criar o efeito de video nós usamos a propriedade backdrop-filter com o parâmetro blur.

backdrop-filter: blur(16px);
-webki-backdrop-filter: blur(16px);

Para inverter as cores do elemento de plano de fundo usamos o parâmentro invert

backdrop-filter: invert(80%);
-webki-backdrop-filter: invert(80%);

Aplicando efeito de tonalização sépia

backdrop-filter: sepia(90%);
-webki-backdrop-filter: sepia(90%);

Muitos outros efeitos pode ser criados com a propriedade CSS backdrop-filter. Para saber mais consulte a documentação oficial.