Neumorfismo Diseño CSS Guía Completa
Domina la técnica soft UI con sombras duales, requisitos de color y consideraciones de accesibilidad.
El neumorfismo surgió en 2020 como tendencia de diseño que combina skeuomorfismo y diseño plano. Crea la ilusión de elementos extruidos o presionados en el fondo usando sombras cuidadosamente posicionadas.
La técnica se basa en una paleta monocromática y dos sombras opuestas — una clara, una oscura — aplicadas al mismo elemento. Entender la matemática detrás desbloquea resultados consistentes y profesionales.
Qué es el neumorfismo
El neumorfismo crea una apariencia suave y extruida colocando una sombra clara arriba-izquierda y una oscura abajo-derecha. El fondo y el elemento comparten el mismo color base, creando una fusión invisible. A diferencia del diseño plano, el neumorfismo implica profundidad física sin detalles fotorrealistas.
Herramienta gratuita Generador de Neumorphism Crea efectos de UI suave extruida con dobles sombras boxLa técnica de sombra dual
El núcleo del neumorfismo es la box-shadow dual: una sombra clara desplazada hacia la fuente de luz (arriba-izquierda) y una oscura alejada de ella (abajo-derecha). El color de sombra se obtiene aclarando y oscureciendo el tono de fondo un 10–15%. Ambas sombras usan un radio de desenfoque de 20–30px.
Requisitos de color
El neumorfismo solo funciona en un rango de colores estrecho. El fondo debe ser un tono medio y las sombras claras y oscuras deben compartir el mismo matiz. Este es el patrón CSS:
.card {
background: #e0e5ec;
box-shadow:
8px 8px 20px #b8bec7,
-8px -8px 20px #ffffff;
border-radius: 12px;
}Convexo vs cóncavo
Los elementos convexos (elevados) usan sombras hacia afuera: clara arriba-izquierda, oscura abajo-derecha. Los elementos cóncavos (presionados) usan sombras internas con la palabra clave `inset`, invirtiendo la ilusión. Combinar sombras externas e internas puede simular un interruptor.
Problemas de accesibilidad
El bajo contraste del neumorfismo entre elemento y fondo frecuentemente no cumple los requisitos WCAG 2.1 AA (mínimo 3:1 para componentes UI). Soluciones: aumentar la opacidad de sombra, usar borde para estados de foco, o reservar el neumorfismo solo para elementos decorativos.
Cuándo usar neumorfismo
El neumorfismo funciona mejor para paneles, relojes, reproductores de audio y quioscos donde la estética de marca supera las necesidades de accesibilidad. Evitarlo para navegación principal e interfaces con mucho texto.
Herramienta gratuita Generador de Box Shadow Crea sombras box CSS en capas con vista previa en vivo