Si has navegado apps de fintech, herramientas de productividad o dashboards modernos últimamente, seguramente notaste algo: las interfaces se sienten más suaves, más táctiles, casi como si pudieras tocar los botones. Eso es claymorphism.
¿Qué es claymorphism?
Es un estilo de diseño UI que simula superficies de arcilla o plastilina. Se caracteriza por sombras suaves y difusas, bordes redondeados, colores ligeramente desaturados y una ilusión de profundidad que hace que cada elemento parezca un objeto físico 3D.
Es la evolución natural de tendencias anteriores como neumorphism (que era demasiado sutil para ser accesible) y glassmorphism (que depende demasiado del fondo). Claymorphism toma lo mejor de ambos y lo hace funcional.
¿Por qué funciona tan bien?
- Familiaridad táctil: Nuestro cerebro reconoce la profundidad instintivamente. Un botón que "se ve" elevado invita a ser presionado.
- Jerarquía visual clara: Las sombras crean capas naturales, lo que ayuda al usuario a entender qué es clickeable y qué es fondo.
- Calidez emocional: Los bordes suaves y los colores cálidos generan una experiencia menos fría que el flat design puro.
- Versatilidad: Funciona igual en modo oscuro que en claro, en mobile y desktop.
Cómo lo aplico en NearVisual
Este mismo sitio web está diseñado con claymorphism oscuro. Cada tarjeta, cada botón y cada sección usa el mismo sistema de sombras y radios. La consistencia es clave: si mezclas estilos, pierdes el efecto.
Los elementos fundamentales son:
- Sombras internas y externas: La combinación de
box-shadowinterna (para el brillo superior) y externa (para la profundidad) es lo que crea el efecto clay. - Border-radius generosos: 20px mínimo. Los bordes agresivamente redondeados son la firma del estilo.
- Gradientes sutiles: La superficie nunca es un color plano. Siempre hay un gradiente de 2-3% entre la parte superior e inferior del elemento.
- Colores controlados: Un acento (cyan en mi caso), un fondo muy oscuro y texto con jerarquía (blanco para títulos, gris para cuerpo).
¿Es solo una moda?
Las tendencias van y vienen, pero los principios que hacen funcionar a claymorphism — profundidad, jerarquía, calidez — son intemporales. Aunque el nombre cambie, el lenguaje visual que propone va a seguir siendo relevante.
El diseño más avanzado es el que no parece diseño. Parece obvio. Parece natural. Parece que siempre estuvo ahí.
¿Quieres este estilo para tu marca?
Diseño sitios web con esta estética. Cuéntame tu proyecto.
Quiero este diseño →