Efecto Glassmorphism con CSS o efecto cristal

En este capítulo del cómo se hace te enseño como crear el efecto glassmorphing o glassmorphism con CSS un efecto que consiste en mostrar un contenido como si se estuviera mirando a través de un cristal

Es un efecto que empezó a usarse en 2020. La idea es mostrar capas apiladas que simulan ser un vidrio virtual, algo que además da cierto aspecto de tridimensionalidad. Es como si miraras a través de un vidrio.

Además parece que es una de las tendencias que nos viene para 2024, junto a otras como fondos oscuros, tipos vintage, dibujos de apariencia manual o animaciones de texto.

Las características de este diseño se pueden resumir en estos principios

  • Fondos semitransparentes para crear sensación de profundidad.
  • Bordes borrosos y otras características que los hagan parecer como si estuvieran hechos de vidrio.
  • Efectos de sombra para que los elementos de la interfaz de usuario parezcan flotar en el espacio
Efecto Glassmorphism o efecto cristal con CSS

Ejemplo de uso, el código HTML

Esta es una posible aplicación del efecto glassmorphism aplicado a toda la página, muy útil para el area hero de una pagina web.

He usado el body como contenedor con una imagen de fondo. Dentro de body se coloca un bloque tipo card con información que queremos mostrar. Este efecto será nuestro vidrio, donde veremos el efecto glassmorphism

La estructura card es habitual en el diseño web (puedes ver como crear una card aquí mismo). Se compone de dos bloques en horizontal. El izquierdo contiene una imagen y el derecho es el otro bloque flex para insertar unas lineas con los datos a mostrar.

La disposición tipo flex facilita mucho la colocación de los elementos.

El elmento html body es un flex horizontal (row), mientras que la mitad con los datos es un flex en columna (column)

Iigualmente se podría haber usado una sectionm div, article o cualquiere bloque conteniendo bloques hijos. Las posicones se pueden conseguir con flx, grid o incluso con poscionamientos absolutos. Experimenta.

<section class="card">

<div class="img">

<img src="/como_se_hace/imgs/glass-img.jpg" alt="room">

</div>

<div>

<header class="title">Bienvenidos al hotel<br>

HighGreen

</header>

<div class="line"><b>Juan Pérez Wiskat</b></div>

<div class="line"><b>Angela Restin Rute</b></div>

<div class="subtitle">Su reserva está confirmada</div>

<div class="line"><b>Día de entrada: 12 de Febrero de 2030</b></div>

<div class="line"><b>Día de salida: 20 de Febrero de 2030</b></div>

</div>

</section>

Estilos CSS para el efecto glassmorphism.

La clave para lograr este efecto vidrio es el uso de elementos apilados. Tendremos un contenedor que será nuestro fondo (podría ser otro bloque), y dentro un elemento hijo que hará las veces del vidrio a través del cual vemos el elemento de detrás.

La forma más simple es usar el elemento body con una imagen de fondo. Sería el contenedor.

El elemento hijo puede ser una ventana o bloque div con aspecto translucido que dejará ver el fondo pero d emanera nítida, sino como a través del vidrio (en este caso la card).

/*Esta regla (.card) es la clave para lograr el efecto*/

.card {

backdrop-filter: blur(2.4px) saturate(148%);

-webkit-backdrop-filter: blur(2.4px) saturate(148%);

background-color: rgba(255, 255, 255, 0.41);

border-radius: 12px;

border: 1px solid rgba(209, 213, 219, 0.3);

box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

display:flex;

width: 70%;

}

.card .body{

display: flex;

flex-direction: column;

padding: 4px 4px 4px 12px;

justify-content: space-around;

}

.card .title{

font-size: 1.8rem;

color: black;

text-align: center;

padding-bottom: 10px

}

.card .subtitle{

font-size: 1.2rem;

color: #ffffff;

text-shadow: 1px 2px 7px black;

padding: 10px 0;

}

.card .line{

padding-left: 10px;

}

.card .img{

display:flex;

overflow:clip;

max-width:50%;

}

.card .img img{

border-radius: 12px;

}

html{

font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

font-size: 18px;

}

body{

background-image: url("/como_se_hace/imgs/glasmorfism-bck.jpg");

background-size: cover;

min-width: 100vw;

min-height: 100vh;

display:flex;

justify-content: center;

align-items: center;

}

Al probarlo en el editor de código online (botón probar) ensancha el panel derecho para ver bien como funciona. También puedes ver la página completa. Verá que la parte derecha de la card deja ver el fondo algo borroso, como si se mirara a través de un critasl trnaslucido. Eso es el efecto grlassmofism.
Trabaja este ejemplo, modifícalo, cambia los valores de transparencia, sombreados...verás como logras resultados bastante llamativos.
Este ejemplo no está hecho en modo responsive, pues el objetivo es mostrar como lograr el efecto vidrio, o glassmorphism. Para hacerlo recursivo puedes añadir los css media query para, por ejemplo, convertir el flex del body a modo columna y el ancho del bloque a que ocupe toda la pantalla