Efecto Glassmorfismo con CSS

El efecto Glassmorfismo es una de las tendencias más recientes en la interfaz de usuario,  este efecto pretende básicamente crear al usuario la apariencia y sensación  de que los elementos se encuentran sobre un cristal, creando un desenfoque en el contenido de fondo.

Este efecto lo podemos encontrar en iOS, en la pantalla de booteo de Kali Linux, en windows 10 y actualmente en MacOS (en su versión Big Sur). Para crear este efecto es sencillo, solo consta de manipular la opacidad, profundidad y blur de los elementos, así como se muestra en la siguiente imagen.

Para crear este ejemplo(Imagen anterior) solo se necesitan dos contenedores (<div>).

<div> class="main-cotainer">
      <div> class="glass-cotainer">
      </div>
</div>
 

.

Los estilos del primer contenedor son los siguientes:

width: 100vw;
height: 100vh;
display: flex; 
position: relative; 
justify-content: center; 
align-items: center;

Para el segundo contenedor:

width: 80vw; height: 80vh;
position: absolute; border-radius: 40px;
background: rgba( 255, 255, 255, 0.25 );
box-shadow: 0 8px 32px 0 rgba(23, 220, 255, 0.37);
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 8px );
border-radius: 10px;