Generador de glassmorphism

Funciones

• El tinte del vidrio y su opacidad se ajustan por separado — la translucidez es la base de todo el efecto
• Desenfoque del fondo de 0 a 60px, con previa al momento
• Saturación de 100% a 300%, para que el color de detrás quede más vivo
• Borde claro que se puede activar o desactivar, con su color y su opacidad
• Radio de las esquinas ajustable
• Emite a la vez `backdrop-filter` y `-webkit-backdrop-filter`, así en iOS también desenfoca de verdad
• Detrás de la previa hay un fondo de color, para que se noten el desenfoque y la saturación
• Debajo aparece la regla CSS completa lista para copiar, con el selector `.glass`
• Los parámetros se recortan y los colores se validan, sin producir CSS inválido
• Todo se ejecuta en tu navegador: no se sube nada

Cómo se usa

1. Empieza por la opacidad: demasiado baja y no hay vidrio, demasiado alta y es un bloque macizo
2. Sigue con el desenfoque del fondo y observa cuánto se mezcla el color de detrás
3. Si lo quieres más luminoso, sube la saturación
4. Cuando te convenza, pulsa el botón de copiar y llévate la regla entera

Preguntas frecuentes

¿Por qué mi vidrio esmerilado no se ve en el iPhone?

Casi siempre es que falta `-webkit-backdrop-filter`. Safari no aceptó la forma estándar hasta la 18, y su cuota en móvil no es pequeña, así que el código generado lleva las dos líneas. Hay además una condición fácil de pasar por alto: detrás del elemento tiene que haber algo de verdad (una imagen, un bloque de color, otro elemento). Si detrás hay una página blanca, desenfocar blanco sigue dando blanco y parece que no ha pasado nada.

¿Qué diferencia hay entre `backdrop-filter` y `filter`?

En una frase: `filter` desenfoca lo propio y `backdrop-filter` desenfoca lo de detrás. Si pones `filter: blur(12px)` en un elemento, ese elemento y su texto se vuelven borrosos; si pones `backdrop-filter: blur(12px)`, el elemento se mantiene nítido y lo que se ve a través de él queda desenfocado — solo esto último es vidrio esmerilado. Se pueden usar a la vez (desenfocar detrás y luego ajustar un poco el propio elemento), pero no tomes `filter` como la receta del vidrio.

¿Qué opacidad conviene poner?

Normalmente entre el 10% y el 30%. Por debajo del 10% el vidrio casi desaparece y el borde y las esquinas se quedan sin apoyo; por encima del 30% se parece cada vez más a un bloque opaco normal, el contenido de detrás deja de distinguirse y se pierde la sensación de vidrio. El valor exacto depende además del contraste de detrás: cuanto más recargado sea el fondo, más baja debe ser la opacidad (para dejar pasar más contenido) y más peso tiene el borde para mantener el contorno.

¿Este efecto tiene coste de rendimiento?

Sí, y más de lo que parece. `backdrop-filter` obliga al navegador a extraer aparte la zona de detrás del elemento y desenfocarla, y eso es un coste continuo al hacer scroll o al animar — se nota sobre todo con varios elementos de vidrio apilados, y en equipos modestos se pierden fotogramas. Consejo práctico: no pongas muchos en una misma pantalla, no dejes que se muevan por una zona grande durante el scroll y no animes el propio elemento de vidrio. Va bien para capas fijas (una barra de navegación, una tarjeta) y mal como fondo de página que se desplaza.

¿Cómo garantizo que el texto se lea sobre el vidrio esmerilado?

Es la trampa más gorda de este estilo: al desenfocar el fondo, la claridad que queda bajo el texto es imprevisible — la misma barra de navegación se lee bien sobre una imagen clara y se emborrona sobre una oscura. Algunas ideas prácticas: dar a la capa de vidrio un tono general (un blanco con algo del color principal en vez de blanco puro), para que el contraste del texto varíe menos; añadir al texto una `text-shadow` suave; y la más pesada pero la más fiable, probar el contenido más claro y el más oscuro que pasan por debajo y no darlo por bueno hasta que se lean en los dos.