Haciendo div moderno

Mi computadora en linux lubunto con navegador chromium

__///////////

Por lo tanto no se ve el efecto borroso

El glassmorphism es un estilo visual que imita el efecto de vidrio esmerilado. Se logra combinando tres propiedades clave en CSS:

1. Fondo semitransparente:

background: rgba(255, 255, 255, 0.1);

Usa rgba para que el fondo tenga opacidad sin ser completamente transparente.

2. Efecto de desenfoque:

backdrop-filter: blur(10px);

Esta propiedad difumina los elementos detrás del div, creando la ilusión de un vidrio esmerilado.

3. Bordes y sombras suaves:

border: 2px solid rgba(255, 255, 255, 0.3);

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

Un borde semitransparente refuerza el efecto de vidrio.

La sombra da profundidad y hace que el div parezca flotante.

¿Por qué no parece una novedad?

Porque backdrop-filter ya lleva tiempo en CSS, pero antes no tenía soporte completo en todos los navegadores. Ahora es más usado en diseños modernos, como en macOS y Windows 11.