Si conoces un poquito de CSS seguro que conoces la propiedad filter. Es una propiedad que te permite aplicar diferentes filtros a tus elementos.

Hoy vengo a hablaros de mi favorito: blur y de cómo suelo utilizarlo para crear elementos muy resultones que imitan a paneles de cristal.

Vamos a ir de menos a más, así que preparaos.

¿Por dónde empezamos?

Sería algo así:

.glass {
  background: hsla(0 0% 98% / 0.2); //Añadimos un fondo translúcido
  backdrop-filter: blur(16px); //Añadimos el desenfoque
  border-radius: 16px;
  border: 1px solid hsla(0 0% 98% / 0.3);
}

¡Así de fácil! 🥳

Y el resultado no está mal ¿No? Puedes jugar con el valor de blur para modificar la translucidez (¿existe esa palabra?) del cristal.

Hasta aquí todo bien. Y oye, si solo quieres utilizar este efecto en elementos estáticos, no necesitas más. Pero...

¿Qué pasa cuando usamos blur en elementos que se mueven? 🤔

Supongamos que quieres aplicar este efecto en una Navbar que va a ser sticky. Pues ahí nos encontramos con un pequeño problema...

¡Pruébalo tú mismo! Juega con las barras y verás que hasta que al menos un píxel de la foto no pasa por detrás del cristal, no se genera ningún blur.

¿Pero por qué pasa esto? 😨

Pues resulta que los cálculos que realiza CSS para generar el blur únicamente tienen en cuenta los píxeles que se encuentran detrás del elemento con la propiedad backdrop-filter.

Pero los cristales no son píxeles.

Los cristales de verdad doblan y reflejan la luz de un montón de formas. ¿Qué podemos hacer entonces para conseguir un efecto más resultón?

Una opción (la única que conozco por ahora, de hecho 😅) es ampliar el elemento con backdrop-filter, y luego enmascararlo con un mask-image.

.glass-wrapper {
  position: relative;
  height: 150px;
  width: 100%;
  z-index: 1;
}

.glass {
  background: hsla(0 0% 98% / 0.2);
  backdrop-filter: blur(16px);
  border-radius: 16px;
  border: 1px solid hsla(0 0% 98% / 0.3);
  position: absolute;
  inset: 0;
  height: 200%;
  mask-image: linear-gradient(to bottom, black 0% 50%, transparent 50% 100%);
  pointer-events: none;
}

¿Ves la diferencia? Queda mucho más natural.

Aquí te dejo un sandbox para que experimentes con el efecto. Pincha en Toggle Mask y verás cómo usamos mask-image para 'ocultar' parte del elemento con backdrop-filter.

¡Fíjate que el cristal ya refleja parte de la luz de la foto antes de que esta llegue a pasar por detrás!

import styles from "./GlassComponent.module.css"
import { useState } from "react"

export default function GlassPlayground() {
const [isMasked, setIsMasked] = useState(false)

return (
  <>
    <div className={styles.glassWrapper}>
      <div className={`${styles.glass}`} style={{
      maskImage: isMasked ? "linear-gradient(to bottom, black 0% 50%, transparent 50% 100%)" : "none"
      }}/>
    </div>
    <div className={styles.Box} />
    <p className={styles.author}>Foto de <a href="https://unsplash.com/es/@aoirostudio?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Francois  Hoang</a> en <a href="https://unsplash.com/es/fotos/luces-moradas-y-azules-procedentes-de-un-edificio-de-hormigon-2x6VHSRVqSA?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></p>
    <button className={styles.btn} onClick={(e) => setIsMasked(!isMasked)}>Toggle Mask!</button>
  </>
)
}

But wait! There's more!

Si usamos la técnica anterior con otro filtro muy interesante como es brightness, podemos también emular cómo la luz incide de manera diferente en el borde del cristal y crea una ilusión visualmente más interesante.

.glass-wrapper {
  position: relative;
  height: 150px;
  width: 100%;
  z-index: 1;
}

.glass {
  background: hsla(0 0% 98% / 0.2);
  backdrop-filter: blur(16px);
  border-radius: 16px;
  border: 1px solid hsla(0 0% 98% / 0.3);
  position: absolute;
  inset: 0;
  height: 200%;
  mask-image: linear-gradient(to bottom, black 0% 50%, transparent 50% 100%);
  pointer-events: none;
}

.glass-edge {
  position: absolute;
  inset: 0;
  background: hsla(0 0% 98% / 0.3);
  backdrop-filter: blur(16px) brightness(2);
  height: 100%;
  mask-image: linear-gradient(to bottom, black 0% 5px, transparent 5px 100%);
  pointer-events: none;
}

¡Cuidado! ¿Veis ahí ese pointer-events: none? Esto es para que el usuario pueda seguir clickando en los elementos que queden por detrás del cristal. Recuerda, aunque lo estemos 'enmascarando', el cristal sigue ocupando más espacio del que podemos ver.

Ya no tenéis excusa. Si os cruzáis con algún cliente al que le flipe la estética cristal ahumado con esto deberíais tener todas las herramientas necesarias para dejarlo contento.