El neumorphism (o soft UI) es el estilo de diseño donde los elementos parecen extruidos del propio fondo, como si la interfaz estuviera molada en una sola pieza de plástico blando. Consigue ese efecto con algo tan simple como dos sombras simultáneas bien calculadas. Es un estilo visualmente atractivo con una trampa de accesibilidad importante que conviene conocer antes de adoptarlo.
La clave: dos sombras en direcciones opuestas
Un botón neumórfico no tiene borde ni contorno. La sensación de relieve se construye exclusivamente con box-shadow:
.neu {
background: #e0e5ec;
border-radius: 32px;
box-shadow:
10px -7px 24px #ffffff,
-10px 7px 24px #c1c5cb;
}
La lógica es la de un objeto iluminado desde arriba-derecha:
- Sombra clara (blanca o casi) proyectada en dirección contraria a la luz: simula el brillo del canto que recibe luz directa.
- Sombra oscura proyectada en la misma dirección de la luz: simula la zona del elemento que queda en penumbra sobre el fondo.
El fondo del elemento debe ser exactamente el mismo color que el fondo de la página. Si difiere aunque sea un poco, el truco se descubre: deja de parecer material extruido y parece un rectángulo flotando.
Los colores claros y oscuros no se eligen a mano
En un sistema neumórfico coherente, los tonos de las sombras se derivan matemáticamente del color base, multiplicando cada canal RGB:
function shift(hex, factor) {
const clamp = v => Math.max(0, Math.min(255, Math.round(v)));
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
const toHex = v => clamp(v).toString(16).padStart(2, "0");
return "#" + toHex(r * factor) + toHex(g * factor) + toHex(b * factor);
}
const base = "#e0e5ec";
const claro = shift(base, 1 + intensidad); // factor > 1 aclara
const oscuro = shift(base, 1 - intensidad); // factor < 1 oscurece
Con una intensidad del 14% sobre #e0e5ec, el canal rojo claro sería 224 × 1.14 = 255 (satura), y el oscuro 224 × 0.86 ≈ 193. Esta derivación garantiza que cualquier color base que elijas produzca sombras armónicas automáticamente.
La geometría: ángulo de luz
Las posiciones de las sombras salen de trigonometría básica. Dado un ángulo de luz θ (medido en grados) y una distancia d:
const rad = (angulo * Math.PI) / 180;
const dx = Math.round(Math.cos(rad) * distancia);
const dy = Math.round(Math.sin(rad) * distancia);
const sombraClara = `${-dx} ${-dy} ${blur} ${colorClaro}`;
const sombraOscura = `${dx} ${dy} ${blur} ${colorOscuro}`;
La sombra clara va exactamente en el punto opuesto a la oscura respecto al centro del elemento. Cambiar el ángulo de luz mueve ambas a la vez, como girar una lámpara alrededor del objeto.
El estado pressed con inset
Un botón neumórfico necesita responder al clic, y la respuesta canónica es "hundirse": las mismas dos sombras pero hacia dentro:
.neu:active {
box-shadow:
inset 10px -7px 24px #ffffff,
inset -10px 7px 24px #c1c5cb;
}
La palabra clave inset invierte la dirección de cada sombra. El efecto percibido pasa de "sobresale" a "está pulsado dentro de la superficie", igual que un botón físico real. Combinado con una micro-reducción de escala (transform: scale(0.98)), la sensación táctil es muy convincente.
El problema serio: contraste
Aquí está la razón por la que el neumorphism no conquistó el mundo pese a su popularidad en Dribbble: el contraste entre elemento y fondo es casi cero por definición. Un usuario con baja visión no distingue dónde está el botón; alguien con temblor motriz pierde la referencia visual del control.
Si lo usas, mitiga así:
- Reserva el neumorphism para elementos decorativos o para interfaces donde el usuario ya sabe dónde está todo (un reproductor de música, un panel de control personal).
- Añade refuerzos sutiles: un borde de 1px con alpha muy bajo o una ligera variación de color del texto.
- Nunca lo uses para elementos críticos de navegación o acciones destructivas.
- Verifica los estados hover/focus con indicadores adicionales (outline, cambio de peso tipográfico).
El neumorfismo funciona mejor como acento estético en superficies grandes (tarjetas, sliders, toggles) que como lenguaje completo de la interfaz.
Distancia, blur e intensidad: cómo interactúan
Los tres parámetros numéricos del estilo se controlan entre sí:
- Distancia separa las sombras del elemento: más distancia = relieve más pronunciado. Por debajo de 4px el efecto casi desaparece.
- Blur define la suavidad del degradado de la sombra. Un valor entre 1.5× y 2× la distancia suele dar el resultado más natural.
- Intensidad (cuánto se aclara u oscurece el color base) determina cuán visible es el efecto. Por encima del 20% empieza a verse sucio; por debajo del 8%, invisible en pantallas de bajo contraste.
Genera tus valores sin hacer cuentas
Calcular ángulos, factores de color y probar combinaciones a mano es tedioso. Nuestro generador de Neumorphism hace las conversiones por ti: eliges color base, ángulo de luz, distancia, blur e intensidad, y obtienes tanto el estado normal como el pressed listos para copiar.
Preguntas frecuentes
¿Neumorphism o glassmorphism? Son tendencias distintas y compatibles: neumorphism juega con sombras monocromas sobre fondos planos; glassmorphism con transparencia y desenfoque sobre fondos coloridos. Puedes usar neumorphism en un panel y glassmorphism en un modal del mismo producto.
¿Funciona en modo oscuro? Sí, con matices: sobre fondo oscuro las sombras claras ganan protagonismo y hay que bajar la intensidad. El color base típico del modo oscuro neumórfico ronda #2d3239 con derivadas proporcionales.
¿Afecta al rendimiento? Dos box-shadow por elemento es un coste despreciable. Como con cualquier sombra, evita animar los parámetros de la sombra directamente; anima transform si necesitas transiciones fluidas.
Crea tu estilo neumórfico con vista previa de ambos estados usando el generador de Neumorphism, gratis y sin registro.