Efecto vidrio sobre imágenes con CSS

Hoy vamos a probar una propiedad visualmente muy interesante y de moda recreando el “efecto vidrio sobre imágenes con CSS” y por supuesto que hablamos del backdrop-filter, una propiedad que permite modificar la visibilidad del elemento de fondo, consiguiendo cambios de color, desenfoque, brillo, contraste, saturación, entre otros muchos efectos.

En este caso haremos que esta imagen:

Tenga un efecto de vidrio, borroso, difuminado o como quieras nombrarle, pero realmente el efecto es llamado “Glassmorfismo” (Glassmorphism).

El Glassmorfismo: es una tendencia en el diseño de interfaces (UI) caracterizado por la utilización de transparencias con efectos que asemejan al vidrio esmerilado para generar así una jerarquía visual entre los elementos que hacen parte de la composición.

Para ello vamos a utilizar el siguiente HTML: tenemos un contenedor para agruparlos, una imagen y posteriormente un div con clase “glass” al cual aplicaremos nuestro backdrop-filter para modificar la visibilidad de la imagen.

<div class="contenedor">
  <img src="<https://i.picsum.photos/id/883/600/600.jpg?hmac=MlIT13Nxj8xNao7fZ44N9CxEDEW7ipYEdS1IIdYyB3Q>" alt="sujeto">
  <div class="glass"></div>
</div>

Agregamos los siguientes estilos. Ojo al backdrop-filter: blur(5px) aplicado a nuestro div (que esta delante la imagen gracias al position: absolute)

.contenedor{
  height:300px;
  width:500px;
  margin:5px;
  position:relative; /*importante para contener a los elementos internos*/
}
.glass{
  height:100%;
  width:100%;
  position:absolute; /*position absolute para colocarlo delante de la imagen*/
  top:0; /*posicionamos el div a la altura del contenedor*/
  border-radius:10px;
  backdrop-filter: blur(5px); /*El efecto de vidrio*/
}
img{
  object-fit:cover; /*ajustamos la imagen al contenedor*/
  width:100%;
  height:100%;
  border-radius:10px;
}

Te adjunto un ejemplo práctico en mi Codepen, donde usamos 3 niveles de difuminado para observar los distintos resultados.

See the Pen Glassmorphism Card by Angel Mavare (@angelmavare) on CodePen.

Espero que este ejemplo sobre efecto de vidrio sobre imágenes con CSS haya sido de tu utilidad, comparte la publicación con alguien que la necesite y recuerda que puedes encontrar mas artículos como este en:

• Snippets

Mas información acerca de las propiedades que te he mostrado:

• developer.mozilla.org – backdrop-filter