La versión corta
- El glassmorphism es un estilo de interfaz que usa paneles translúcidos y desenfocados, como cristal esmerilado, superpuestos a fondos de colores.
- El efecto depende del fondo: el cristal esmerilado sobre un color liso parece una caja gris, mientras que el cristal sobre un degradado rico brilla.
- Su principal problema es el contraste, porque el texto sobre cristal queda sobre el color que haya detrás, que puede cambiar al desplazar la página.
- En CSS, el glassmorphism se construye con el desenfoque de backdrop-filter, un relleno semitransparente, un borde claro y fino y una alternativa para los navegadores sin compatibilidad.
- El cristal funciona mejor para unas pocas capas flotantes, como la navegación, las tarjetas y los diálogos, no para todas las superficies de una página.
En esta página
El glassmorphism es un estilo de diseño construido con cristal esmerilado: paneles translúcidos que desenfocan lo que hay detrás, superpuestos a un fondo de colores, normalmente un degradado. El panel conserva un toque del color de debajo, un borde fino y brillante atrapa la luz, y toda la interfaz se siente en capas y física. Los sistemas operativos llevan años usando materiales translúcidos, y en 2025 Apple puso el cristal en el centro de su nuevo lenguaje de diseño Liquid Glass, así que el estilo no va a desaparecer. Usado sin cuidado, sin embargo, produce cajas grises y texto ilegible.
Por qué el glassmorphism necesita un degradado
El cristal esmerilado solo parece cristal cuando hay algo colorido detrás que desenfocar. Sobre un fondo liso blanco o gris, un panel de cristal es apenas un gris algo distinto. Sobre un degradado rico, con charcos de color en distintos puntos, el panel recoge un color suave que cambia de un borde a otro, y ese cambio es lo que el ojo lee como cristal. Así que el degradado no es decoración: es la mitad del efecto.
Los mejores fondos para cristal tienen zonas de color fuertes y separadas y una base oscura o profunda, muy parecidos a los degradados de malla o a los degradados de aurora. Coloca el charco más brillante de modo que quede en parte detrás de un panel; el panel brillará donde se solapen.
El CSS que hay detrás del glassmorphism
El núcleo del efecto es backdrop-filter, que aplica un filtro a todo lo que hay detrás de un elemento y no al elemento en sí. Combínalo con un relleno semitransparente, un borde fino y translúcido y una sombra suave. Las versiones actuales de los principales navegadores lo admiten, y las versiones antiguas de Safari necesitan el prefijo -webkit-; mira MDN sobre backdrop-filter y caniuse.
.glass {
background: rgb(255 255 255 / 0.12);
-webkit-backdrop-filter: blur(20px) saturate(140%);
backdrop-filter: blur(20px) saturate(140%);
border: 1px solid rgb(255 255 255 / 0.24);
border-radius: 20px;
box-shadow: 0 10px 40px rgb(0 0 0 / 0.25);
color: #ffffff;
}
/* Without backdrop-filter, use a solid, readable panel instead */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass { background: rgb(15 23 42 / 0.88); }
}
/* Respect people who ask for less transparency, where supported */
@media (prefers-reduced-transparency: reduce) {
.glass { background: rgb(15 23 42 / 0.92); }
}saturate() mantiene vivo el color desenfocado en lugar de apagado.| Propiedad | Valor de partida | Qué controla |
|---|---|---|
| Desenfoque | 16 a 30 px | Cuánto se disuelve el fondo. Con demasiado poco, el detalle se ve a través del texto |
| Opacidad del relleno | 10 a 25% de blanco, o 40 a 70% de oscuro | Cuánto se separa el panel del fondo |
| Saturación | 120 a 160% | Mantiene vivo el color desenfocado en lugar de gris |
| Borde | 1 px al 15 a 30% de blanco | El borde brillante que vende el cristal |
| Sombra | Grande, suave, de poca opacidad | Levanta el panel del fondo |
Glassmorphism y contraste
El mayor problema del cristal es que su texto queda sobre lo que haya detrás del panel. Un título que se lee bien sobre una zona índigo oscura puede desaparecer cuando el panel se desplaza sobre un brillo rosa pálido. El contraste tiene que aguantar en el peor caso, no en el de tu maqueta. Las WCAG piden 4,5:1 para el texto de cuerpo; compruébalo en el punto más claro que pueda quedar detrás de las palabras.
Cristal ilegible
- Desenfoque ligero, de modo que las formas de detrás se ven a través de las letras
- Relleno muy transparente sobre un fondo brillante
- Texto blanco fino y de peso ligero
- Paneles de cristal que se desplazan sobre contenido cambiante
Cristal legible
- Desenfoque de 16 px o más para que el fondo se disuelva
- Un relleno teñido lo bastante fuerte para garantizar el contraste
- Pesos medios o negritas para el texto sobre cristal
- Cristal fijo sobre un fondo conocido y controlado
Un truco fiable es teñir el cristal hacia el color más oscuro del fondo en lugar de usar blanco. Un cristal índigo oscuro al 50% sobre un degradado de índigo y rosa mantiene legible el texto blanco en todas partes, sin dejar de mostrar el color a través. Para más formas de mantener claras las palabras, mira texto sobre un degradado.
Cuándo ayuda el glassmorphism y cuándo no
- Ayuda: navegación flotante, diálogos, controles multimedia, tarjetas sobre una portada y widgets al estilo de la pantalla de bloqueo, donde la capa debe sentirse por encima del contenido
- Ayuda: páginas de producto y de lanzamiento donde el degradado es la marca y el cristal lo luce
- Perjudica: formularios, tablas y lectura larga, donde la gente necesita un contraste tranquilo y constante
- Perjudica: páginas con muchas capas de cristal apiladas, que se ven turbias y cuestan rendimiento
- Perjudica: en cualquier sitio donde el fondo sea liso o esté cargado de fotos y texto pequeño
Cómo diseñar una interfaz de cristal
- 1
Diseña primero el fondo
Elige un degradado con charcos de color separados sobre una base profunda. El cristal solo será tan bueno como lo que hay detrás.
- 2
Limita el cristal a una o dos capas
La navegación y un nivel de tarjetas es más que suficiente. Cristal sobre cristal sobre cristal se vuelve gris.
- 3
Desenfoca lo bastante para disolver el detalle
Si aún distingues formas detrás del panel, aumenta el desenfoque antes que nada.
- 4
Tiñe para conseguir contraste
Elige el color y la opacidad del relleno que mantengan legible el texto sobre la parte más clara del fondo.
- 5
Añade un borde claro y una sombra suave
Un borde translúcido de 1 px y una sombra ancha y tenue hacen que el panel se lea como una lámina física.
- 6
Prueba el rendimiento en un móvil
El desenfoque del fondo es costoso de dibujar. Mantén modestas las zonas desenfocadas y evita animarlas en superficies grandes.
El cristal es uno de los varios materiales que puede vestir un degradado; textura de degradado lo compara con el grano, el papel y la seda. Si quieres un fondo que ya tenga los charcos, la profundidad y la luz que necesita el cristal, muchos Marks del Mercado están construidos así, y puedes diseñar con cualquiera de ellos gratis.
Preguntas frecuentes
¿Qué es el glassmorphism?
El glassmorphism es un estilo de diseño que usa paneles translúcidos de cristal esmerilado con fondos desenfocados, un borde claro y una sombra suave, superpuestos a degradados de colores.
¿Cómo hago un efecto de cristal en CSS?
Usa backdrop-filter: blur() con un color de fondo semitransparente, un borde fino y translúcido y una sombra suave, más el prefijo -webkit- para Safari antiguo.
¿Es accesible el glassmorphism?
Puede serlo, si el desenfoque es fuerte, el relleno está lo bastante teñido para mantener el texto a 4,5:1 de contraste sobre el fondo más claro y hay una alternativa lisa.
¿Por qué mi panel de cristal se ve gris?
El fondo de detrás es demasiado liso. El cristal necesita detrás zonas de color fuertes y separadas que recoger.
¿Perjudica backdrop-filter al rendimiento?
Cuesta más que un fondo normal, sobre todo en zonas grandes o al animar. Úsalo en pocos paneles y prueba en móviles.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
