Dos maneras de crear un efecto de cristal helado con CSS

En este tutorial vamos a ver cómo crear un efecto de cristal helado con CSS. Habrás visto este tipo de efecto en interfaces de usuario como la de MacOS e IOS, y también en la que utiliza actualmente Windows. Podríamos decir que es un efecto que está a la moda, dentro de las tendencias web. Podemos emular este cristal helado en sitios web con CSS. En este tutorial te mostraremos cómo llevarlo a cabo mediante dos métodos distintos. Presta atención...

Método 1

El primer método está ampliamente soportado por la mayoría de navegadores modernos, pero requiere escribir más CSS que el segundo método que veremos más adelante. 

Empezaremos creando un div con una clase a la que llamaremos .container. La utilizaremos para representar nuestro panel con efecto de cristal helado. Más tarde, aplicaremos una imagen de fondo a nuestro elemento body. Para este fondo, tendrás que agregar: 

body {
    background-attachment: fixed;
}

Hacemos esto porque los hijos del body heredarán esta imagen de fondo y queremos mantenerla en el mismo tamaño. 

Ahora vamos a crear un pseudo elemento en nuestro .container, que es el que nos va a dar nuestro desenfoque. Entonces, aplicamos lo siguiente: 

.container:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Esto nos da un elemento que cubre el elemento container. Ahora es el momento de agregar un poco de color, que lo haremos usando un box-shadow: 

.container:before {
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
}

Y para darnos un efecto helado, agregamos un filtro de desenfoque: 

.container:before {
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
    filter: blur(10px);
}

Con esto ya lo tenemos casi, pero aún no está del todo. Ahora necesitamos (como hemos explicado anteriormente) definir un fondo heredado tanto para el pseudo elemento como para su padre. 

.container {
    background: inherit;
}
 
.container:before {
    background: inherit;
}

Método 2 

Este método utiliza menos código, pero cuenta con un soporte en navegadores ligeramente menos. Comenzamos con el mismo elemento .container y aplicamos la misma imagen de fondo al elemento body. 

Luego, dirigimos nuestra atención a una propiedad de CSS llamada tbackdrop-filter. Comenzamos agregando ciertos estilos a nuestro .container, incluido un color de fondo del color que más nos guste (vamos a poner un blanco pálido): 

.container {
 background-color: rgba(255, 255, 255, .15);   
}

Luego agregamos el filtro (es posible que debas incluir el prefijo apropiado para tu navegador). 

.container {
 background-color: rgba(255, 255, 255, .15);  
 backdrop-filter: blur(5px);
}