0Original
Sin material. El texto compite con el fondo y casi no se lee.
Receta completa
Puedes mover el panel con las teclas de flecha cuando está enfocado.
CSS resultante
Construcción capa por capa
El mismo panel sumando una capa por celda. Usa la apariencia y el fondo que elegiste arriba, así puedes ver cómo cambia cada paso según lo que hay detrás.
1Desenfoque
Gaussiano de 24 px. Quita el detalle, pero el resultado queda gris y lavado.
2Saturación 180 %
El blur mezcla colores vecinos y los desatura. Subir la saturación devuelve la vida.
3Tinte
Una capa clara (u oscura) fija el contraste base y hace legible el texto.
4Grano
Ruido fino que rompe el banding de los degradados difuminados.
5Borde y brillo
Hairline de 0,5 px y una línea de luz en el canto superior.
6Sombra y esquinas
Sombra en dos capas y esquinas continuas en lugar de arco circular.
7Vibrancy
El texto se mezcla con el fondo (multiply en claro, plus-lighter en oscuro) y toma su color.
Cosas para probar
Apaga la saturación en Paisaje
Sin ella el blur deja el cielo en un gris apagado. Con 180 % el naranja del sol sobrevive al difuminado.
Baja el tinte a cero en App
El texto de atrás sigue casi legible a través del vidrio. El tinte no es decoración, es lo que garantiza el contraste.
Activa Vibrancy en oscuro
Las etiquetas dejan de ser un gris plano y toman el color del fondo. Se aprecia mejor sobre Mosaico.
Quita borde y brillo
Cada uno pesa poco, pero sin ellos el panel pierde canto y se lee como una mancha en lugar de un objeto.
Los grosores son aproximaciones calibradas a ojo, no los valores internos del sistema. La referencia pública más cercana es el sample code UIImageEffects, que usa saturación 1,8 y un tinte de alfa entre 0,3 y 0,82 según el estilo. El radio de blur() en CSS es una desviación estándar, así que no equivale 1 a 1 al radio de esas funciones.
Preguntas frecuentes
¿Qué es el glassmorphism?
Es un estilo de interfaz que imita el vidrio esmerilado: paneles translúcidos que difuminan lo que hay detrás, con un tinte sutil, un borde fino y un brillo interior. Apple lo popularizó en iOS 7 y sigue presente en iOS 18, macOS y visionOS.
¿Cómo se hace el efecto de vidrio esmerilado en CSS?
Con la propiedad backdrop-filter. La receta mínima es backdrop-filter: blur(24px) saturate(180%) más un fondo translúcido con background-color en rgba para el tinte, y un borde de 0,5 px con un brillo interior para definir el canto del panel.
¿Qué navegadores soportan backdrop-filter?
Todos los navegadores modernos: Chrome, Edge, Safari (con el prefijo -webkit-) y Firefox. En navegadores antiguos el panel se muestra sin desenfoque, así que conviene garantizar el contraste del texto con el tinte por si el filtro no se aplica.
¿Por qué mi backdrop-filter no se ve?
Casi siempre por el contexto de apilamiento. Si un ancestro tiene transform, opacity menor que 1, filter o z-index, Chromium trata ese elemento como raíz del fondo y el blur deja de ver lo que hay detrás. Evita esos valores en la cadena de ancestros del panel.