Glassmorphism com CSS

1a atrás

Ion

---

0 0

Glassmorphism é um conceito de UI que imita as características do vidro. Tem sido muito usado nos designs da Apple e Microsoft.

Propriedades

• Translucidez: os objetos atrás do elemento com glassmorphismo podem ser visíveis, mas não totalmente, geralmente apresentam um efeito embaçado, como se tivesse sendo visto através do vidro.
• Elevação: para dar a ideia de diferentes elevações são usados sombreamentos nos elementos.
• Background: o background deve destacar o efeito vitrificado.

Implementação

Primeiramente, no seu HTML, vamos estilizar o body:

body {
background-image: url('https://images.unsplash.com/photo-1579546929662-711aa81148cf?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    margin: 0;
    width: 100%;
}

No #CSS acima, definimos o tamanho e background da página. Agora precisamos adicionar no HTML o elemento que vai receber o glassmorphism:

<div class="card">
    <h1>Exemplo de glassmorphism</h1>
<p>Esse elemento é um exemplo de como utilizar glassmorphism.</p>
</div>

E o seguinte CSS:

.card {
    backdrop-filter: blur(32px);
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 1em;
    left: 50%;
    padding: 1em;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

O resultado será o seguinte:

Glassmorphism CSS Generator

Se você quer uma maneira mais fácil de gerar seus CSS de glassmorphismo você pode usar uma ferramenta online para isso. Existem várias, um exemplo é: