Glassmorphism, claymorphism y neumorphism: cuál usar y cuándo (2026)

Se confunden todo el rato y no son intercambiables. Glassmorphism, claymorphism y neumorphism juegan los tres con sombras y profundidad, pero resuelven problemas distintos y fallan por motivos distintos. Elegir mal te cuesta legibilidad, credibilidad o frames por segundo.

Te lo paso claro: qué es cada uno, el CSS completo listo para copiar, dónde encaja, dónde te hace daño, qué dice WCAG sobre su contraste y cuánto te cuesta en rendimiento. Spoiler de mi recomendación: en 2026 apuesto por glassmorphism si tu producto es premium y por claymorphism si tu marca es cálida. Neumorphism, casi nunca.

Tabla comparativa rápida

Criterio	Glassmorphism	Claymorphism	Neumorphism
Sensación	Vidrio esmerilado	Plastilina inflada	Relieve esculpido
Necesita fondo con textura	Sí, imprescindible	No	No
Contraste WCAG	Depende del fondo	Fácil de cumplir	Muy difícil
Coste de render	Alto (GPU)	Bajo	Bajo
Affordance de botones	Media	Alta	Baja
Mejor para	SaaS premium, dashboards	Marcas lifestyle, apps consumer	Casos nicho muy puntuales
Estado en 2026	Vigente y reforzado	En crecimiento	En retroceso
Ganador por fila	Estética premium	Accesibilidad y coste	Ninguna

Claymorphism gana en accesibilidad y en coste de render. Glassmorphism gana en percepción de producto caro. Neumorphism no gana ninguna fila, y eso ya te dice bastante.

Glassmorphism: el cristal esmerilado

Glassmorphism simula una superficie de cristal esmerilado sobre un fondo con imagen o degradado. Lo que hay detrás se difumina, un borde semitransparente marca el canto de la lámina y una sombra suave la separa del plano de atrás.

El estilo no ha muerto, al contrario. Apple presentó Liquid Glass en la WWDC de 2025 como lenguaje unificado de iOS 26, iPadOS 26 y macOS Tahoe, y eso ha vuelto a poner el cristal en el centro. La versión de Apple añade refracción física y adaptación de contraste en tiempo real, pero la idea base es la misma que puedes reproducir con dos líneas de CSS.

CSS completo, con estados y modo oscuro

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  transition: background 0.2s ease, transform 0.2s ease;
}

.glass:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

.glass:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* Fallback: sin soporte de backdrop-filter, opacamos el fondo */
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(20, 20, 30, 0.75); }
}

/* Modo oscuro */
@media (prefers-color-scheme: dark) {
  .glass {
    background: rgba(20, 20, 30, 0.35);
    border-color: rgba(255, 255, 255, 0.12);
  }
}

/* Respeta a quien pide menos transparencia */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #14141e;
  }
}

Ese bloque @supports es el que casi todo el mundo se salta. Sin él, en un navegador sin backdrop-filter tu tarjeta queda con un fondo blanco al 15 % y el texto encima resulta ilegible. Con él, degrada a un panel sólido y no rompes nada.

Soporte de navegadores

backdrop-filter funciona sin prefijo desde Chrome 76, Edge 79, Firefox 103 y Safari 9 con prefijo -webkit-. Hoy el soporte global ronda el 92 %, así que puedes usarlo en producción. Mantén el prefijo -webkit- por los Safari antiguos y el fallback por los WebView raros de Android.

Cuándo encaja

• Dashboards y paneles de SaaS con posicionamiento premium.
• Hero sections con fondo de imagen, vídeo o degradado animado.
• Modales, popovers y barras de navegación flotantes sobre contenido con scroll.
• Marcas tecnológicas que quieren aire de producto caro sin recurrir a 3D.

Cuándo NO

• Sobre fondos lisos. Si no hay nada que difuminar, el efecto no existe y solo has añadido coste.
• Con texto largo encima del cristal. Apple lo resuelve poniendo el texto en capas sólidas, no directamente sobre el vidrio. Cópiale la idea.
• En listas con decenas de tarjetas de cristal a la vez: el coste se multiplica por elemento.
• Sobre fotos con mucho ruido o alto contraste, donde el texto baila entre zonas claras y oscuras.

Claymorphism: la plastilina suave

Claymorphism simula tarjetas hechas de plastilina o gomaespuma: bordes muy redondeados, sombras multicapa y colores saturados en clave pastel. El término lo acuñó Michał Malewicz a finales de 2021, el mismo diseñador que años antes popularizó el neumorphism. No es casualidad: claymorphism nació como corrección de los fallos del anterior.

La diferencia clave está en el color. Neumorphism usa el mismo tono para fondo y elemento. Claymorphism separa la tarjeta del fondo con color propio, y por eso el contraste deja de ser un problema.

CSS completo, con estados

.clay {
  background: #ffcfd2;
  border-radius: 30px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    inset 0 -8px 0 rgba(0, 0, 0, 0.08),
    inset 0 10px 16px rgba(255, 255, 255, 0.55),
    0 16px 32px rgba(0, 0, 0, 0.10);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.clay:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 -8px 0 rgba(0, 0, 0, 0.08),
    inset 0 10px 16px rgba(255, 255, 255, 0.55),
    0 22px 40px rgba(0, 0, 0, 0.14);
}

/* Pulsado: la pieza se aplasta */
.clay:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.10),
    0 8px 16px rgba(0, 0, 0, 0.12);
}

.clay:focus-visible {
  outline: 3px solid #1b1b1b;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .clay { transition: none; }
  .clay:hover { transform: none; }
}

La segunda sombra interior, la blanca de arriba, es la que hace el truco. Sin ella la tarjeta parece un rectángulo de color plano. Con ella se infla.

Cuándo encaja

• Branding lifestyle, marcas dirigidas a público joven, alimentación y bebidas.
• Apps consumer de fitness, bienestar, finanzas personales o productividad.
• Landings con tono cercano donde quieres bajar la barrera de entrada.
• Combinado con paletas saturadas. Si vas por ahí, los generadores de paletas te ahorran media tarde.

Cuándo NO

• B2B serio, banca, seguros, salud. La plastilina y la confianza institucional no casan.
• Plataformas técnicas y herramientas para desarrolladores.
• Marcas con tono editorial o minimalista, donde los bordes de 30 píxeles chirrían.
• Interfaces densas de datos: el padding que exige claymorphism te come la pantalla.

Neumorphism: el soft UI esculpido

Neumorphism, o soft UI, esculpe botones y tarjetas en el mismo material del fondo. Una sombra oscura abajo a la derecha, una luz clara arriba a la izquierda, y el elemento parece emerger de la superficie. Tuvo su pico entre 2020 y 2021 y desde entonces baja.

CSS completo, con estado pulsado

.neumorphic {
  background: #e0e5ec;
  border-radius: 16px;
  box-shadow:
    9px 9px 16px rgba(163, 177, 198, 0.6),
    -9px -9px 16px rgba(255, 255, 255, 0.5);
  transition: box-shadow 0.2s ease;
}

/* Pulsado: la sombra se invierte hacia dentro */
.neumorphic:active {
  box-shadow:
    inset 6px 6px 12px rgba(163, 177, 198, 0.7),
    inset -6px -6px 12px rgba(255, 255, 255, 0.6);
}

/* Sin este borde, no cumples WCAG 1.4.11 */
.neumorphic--accesible {
  border: 1px solid #6b7280;
}

.neumorphic:focus-visible {
  outline: 3px solid #1f2937;
  outline-offset: 2px;
}

Fíjate en la clase --accesible. Ese borde gris es lo que salva el componente, y también lo que rompe la estética. Ahí está la contradicción del estilo entero: para que funcione hay que quitarle justo lo que lo define.

Cuándo encaja (poco)

• Maquetas conceptuales de portfolio donde el estilo es el argumento.
• Apps de meditación o sueño con muy pocos controles y mucho espacio.
• Reproductores y mandos físicos digitalizados, donde el skeuomorfismo tiene sentido narrativo.

Cuándo NO (casi siempre)

• Cualquier producto con requisitos de accesibilidad. Volvemos a ello en la sección siguiente.
• Pantallas con muchos botones: sin bordes claros, el usuario no distingue qué es pulsable.
• Formularios. Un input neumórfico y un input deshabilitado se ven casi igual.
• Dashboards con tablas y datos densos.

El problema de contraste que decide la partida

Aquí es donde glassmorphism, claymorphism y neumorphism dejan de ser una cuestión de gusto. El criterio WCAG 1.4.11 Non-text Contrast exige que los componentes de interfaz y sus bordes tengan al menos 3:1 respecto a lo que tienen al lado. El texto, en nivel AA, necesita 4,5:1.

Aplica esa regla a cada estilo y el ranking se ordena solo:

• Claymorphism lo cumple sin esfuerzo. La tarjeta tiene color propio y borde visible, así que la separación con el fondo es evidente por definición.
• Glassmorphism depende del fondo. Sobre un degradado controlado lo cumples; sobre una foto de stock con zonas claras y oscuras, el mismo texto pasa y suspende en distintas partes de la tarjeta. La solución de Apple es no poner nunca texto directamente sobre el vidrio.
• Neumorphism tiene el conflicto en el ADN. Fondo y componente comparten color, y las sombras que los separan son suaves por definición. Superar 3:1 obliga a añadir bordes o a oscurecer las sombras hasta que deja de parecer soft UI.

Regla práctica: si tienes que desactivar el estilo para que se entienda la interfaz, el estilo no era el adecuado.

Añade a esto que los tres estilos deberían respetar prefers-reduced-transparency y prefers-contrast. Si quieres el marco completo, te dejo la guía de cómo crear un diseño accesible para revisar el resto de criterios.

Lo que te cuesta en rendimiento

Entre glassmorphism, claymorphism y neumorphism hay una diferencia de coste que casi nadie mide antes de decidir. Claymorphism y neumorphism son sombras CSS: el navegador las pinta una vez y se olvida. Su coste es prácticamente cero.

Glassmorphism es otra historia. backdrop-filter: blur() obliga al navegador a recalcular el desenfoque de lo que hay detrás cada vez que ese contenido cambia. Con una tarjeta fija sobre un fondo estático no lo notas. Con veinte tarjetas de cristal en una lista con scroll, o con una barra de cristal sobre un vídeo, la GPU se satura y aparecen tirones durante el scroll y retrasos al pulsar. Eso te penaliza el INP.

Cómo usar cristal sin pagarlo

1. Limita el cristal a dos o tres superficies por pantalla: la barra de navegación, un modal y poco más.
2. Baja el radio de blur. Pasar de 12 px a 24 px multiplica el trabajo por píxel sin mejorar la sensación.
3. Evita el cristal sobre vídeo o sobre fondos animados. Ahí el recálculo es constante.
4. No animes el propio backdrop-filter. Anima opacity o transform, que van por el compositor.
5. Mide en un móvil de gama media real, no en tu equipo de trabajo.

Si te interesa este nivel de detalle en interacciones, en el post de microinteracciones con código tienes ejemplos de animación barata que no tocan el layout.

Glassmorphism, claymorphism o neumorphism según tu perfil

Aquí tienes el atajo. Busca tu caso y aplica la recomendación sin darle más vueltas.

• Si vendes un SaaS B2B con posicionamiento premium → glassmorphism, y solo en la navegación, el hero y los modales. El resto de la interfaz, plano.
• Si tu app es consumer y quieres que se sienta amable → claymorphism en tarjetas y botones principales, con tipografía redondeada.
• Si trabajas en banca, salud o sector público → ninguno de los tres. Prioriza contraste y jerarquía; los botones ghost bien contrastados te dan sobriedad sin riesgo.
• Si montas una landing de producto físico → claymorphism para las tarjetas de beneficios y una bento grid para el bloque de características.
• Si haces un portfolio y quieres enseñar rango técnico → aquí sí, neumorphism en una pieza concreta, bien ejecutado y con bordes accesibles.

Mi elección personal

Me quedo con claymorphism, y no por moda. Es el único de los tres que puedo aplicar a un proyecto real sin abrir una discusión sobre accesibilidad ni sobre rendimiento. Cumple 3:1 de serie, cuesta cero en render y el estado pulsado se comunica solo. Cuando un estilo no te obliga a negociar nada, lo usas más.

Glassmorphism lo uso, pero con pinzas y siempre en dosis pequeñas: una barra superior, un modal, nunca una parrilla entera. Que Apple lo haya convertido en su lenguaje de sistema le da otros diez años de vida, y eso pesa a la hora de que un cliente lo perciba como actual y no como una moda de 2020.

Neumorphism no lo llevo a producción. Lo he intentado y siempre termina igual: en la revisión de accesibilidad hay que meter bordes, y con bordes ya no es neumorphism, es una tarjeta gris con sombras raras. Como ejercicio de portfolio, adelante. Como sistema de diseño, no.

Errores comunes

• Mezclar glassmorphism, claymorphism y neumorphism en la misma web. Cada uno establece su propio lenguaje de profundidad. Juntos, la interfaz parece rota.
• Usar glassmorphism sobre fondo liso. Sin nada que difuminar solo has añadido una capa translúcida y un coste de GPU.
• Poner párrafos largos sobre el cristal. Súbelos a una capa sólida dentro de la tarjeta.
• Olvidar el fallback @supports. En el navegador equivocado tu texto desaparece.
• Aplicar claymorphism a un producto B2B serio. Pierdes credibilidad antes de que lean una línea.
• Dar por hecho que neumorphism cumple WCAG. No lo hace sin bordes explícitos.
• Animar sombras grandes o blur. Anima transform y opacity, y respeta prefers-reduced-motion.

Preguntas frecuentes

¿Qué es glassmorphism?

Es un estilo visual que simula vidrio esmerilado: el fondo se ve borroso a través del elemento gracias a backdrop-filter: blur(), con un borde semitransparente y una sombra suave. Necesita un fondo con imagen, degradado o contenido detrás para tener sentido.

¿Qué es claymorphism?

Es el estilo «plastilina»: tarjetas con bordes muy redondeados, sombras interiores y exteriores que las inflan, y colores saturados. Lo acuñó Michał Malewicz en 2021 como respuesta a los problemas de usabilidad del neumorphism, añadiendo color propio a cada pieza.

¿Qué es neumorphism?

Es el soft UI: botones y tarjetas esculpidos en el mismo material del fondo, con una sombra oscura y una luz clara en lados opuestos. Tuvo su auge en 2020 y hoy se usa poco porque compartir color con el fondo hace muy difícil llegar al contraste mínimo que pide WCAG.

¿Cuál de los tres debo usar en 2026?

Entre glassmorphism, claymorphism y neumorphism la respuesta depende de tu marca. Glassmorphism si tu producto es premium o técnico y tienes fondos con textura. Claymorphism si eres consumer o lifestyle. Neumorphism solo en piezas puntuales de portfolio. Si dudas entre dos, elige el que menos excepciones te obligue a documentar.

¿Cuál da más problemas de accesibilidad?

Neumorphism, con diferencia. Fondo y componente comparten color, así que superar el 3:1 de WCAG 1.4.11 exige bordes que rompen el estilo. Glassmorphism depende del fondo que pongas detrás. Claymorphism es el más amable de los tres.

¿Funcionan bien en móvil?

Claymorphism y neumorphism sí, porque son solo sombras. Glassmorphism pesa más: el desenfoque se recalcula sobre el compositor GPU y con muchos elementos a la vez aparecen tirones al hacer scroll. Limítalo a dos o tres superficies por pantalla y pruébalo en un móvil de gama media.

¿Qué navegadores soportan backdrop-filter?

Chrome desde la versión 76, Edge desde la 79, Firefox desde la 103 y Safari desde la 9 con prefijo -webkit-. El soporte global ronda el 92 %, suficiente para producción si añades un bloque @supports como fallback.

¿Se pueden combinar entre sí?

Mejor no. Cada uno define su propia física de la luz y la profundidad. Mezclarlos hace que el usuario deje de entender qué está delante y qué está detrás. Elige uno por proyecto y mantenlo en todos los componentes.

¿Qué tendencia los está sustituyendo?

El neobrutalismo se está comiendo el terreno del minimalismo plano, y las interfaces con ilustración 3D suave avanzan en consumer. Aun así, glassmorphism ha ganado vida con Liquid Glass y claymorphism sigue creciendo. El que retrocede de verdad es neumorphism.

¿Sirven para un sistema de diseño completo?

Claymorphism sí, con tokens de color y sombra bien definidos. Glassmorphism funciona como capa, no como base: úsalo en superficies flotantes y deja el resto plano. Neumorphism no escala a un sistema completo porque cada componente nuevo reabre el debate de contraste.

Tienes tres caminos

Si tu marca es premium y tecnológica, glassmorphism sobre un hero con degradado, con el texto en capa sólida y el fallback @supports puesto desde el primer día.

Si tu marca es cálida y cercana, claymorphism en tarjetas y botones, paleta saturada y tipografía redondeada. Es la apuesta más segura de las tres.

Y si te tienta neumorphism, hazte una pregunta antes: ¿el usuario va a saber qué es pulsable sin tocarlo? Si la respuesta no es un sí rotundo, cambia de estilo.

¿Cuál estás aplicando ahora en tus proyectos? Cuéntamelo en los comentarios. Disfrútalos.