Glassmorphism es una tendencia de diseño de UI que crea una textura de vidrio esmerilado haciendo que el fondo sea semitransparente y aplicando un efecto de desenfoque (backdrop-filter: blur()). Es ampliamente adoptado en macOS/iOS de Apple y Windows Fluent Design System.

Con esta herramienta, puedes aplicar 12 tipos de preajustes con un solo clic, y ajustar individualmente las 4 funciones de backdrop-filter: desenfoque, brillo, saturación y contraste. También puedes afinar bordes, sombras y esquinas redondeadas con controles deslizantes, y copiar el código en formato CSS o variable CSS.

backdrop-filter: blur()

Desenfoca el área detrás del elemento. Cuanto mayor sea el valor, más fuerte será el efecto de vidrio esmerilado. Esta es la propiedad central del Glassmorfismo.

backdrop-filter: brightness()

Ajusta el brillo del fondo. 100% es el valor predeterminado. 200% lo hace el doble de brillante, y 0% lo vuelve completamente negro.

backdrop-filter: saturate()

Ajusta la saturación del fondo. 100% es el valor predeterminado. 0% lo hace monocromático, y 200% lo convierte en un color vivo sobresaturado.

backdrop-filter: contrast()

Ajusta el contraste del fondo. 100% es el valor predeterminado. Aumentar el valor enfatiza la diferencia entre la luz y la oscuridad.

Prefijo de proveedor

Se recomienda incluir -webkit-backdrop-filter para la compatibilidad con Safari. Se incluye automáticamente en el código generado por esta herramienta.

Q. ¿backdrop-filter es compatible con todos los navegadores?

A. Es compatible con las últimas versiones de los principales navegadores como Chrome, Edge, Safari y Firefox. IE11 no es compatible, pero se recomienda un diseño de reserva que utilice solo un color de fondo semitransparente.

Q. ¿Cuál es la diferencia entre Neumorfismo y Glassmorfismo?

A. Glassmorfismo utiliza backdrop-filter para crear un efecto de 'vidrio esmerilado', representando la superposición de elementos (eje Z). Neumorfismo utiliza el contraste de luces y sombras de box-shadow para representar 'relieves'.

Q. ¿Afecta al rendimiento?

A. Dado que backdrop-filter utiliza la composición por GPU, un uso moderado no supone un problema. Sin embargo, aplicar valores de blur altos a toda la página puede reducir la tasa de fotogramas.

Q. ¿Puedo usar el código generado tal cual?

A. Sí. Simplemente pega el CSS copiado en tu hoja de estilos para aplicarlo. Puedes cambiar el nombre de la clase según lo necesites.