Generador de neumorfismo
Elige el color de la superficie y el generador calcula las sombras clara y oscura que hacen que un elemento parezca salir del fondo o hundirse en él. Cambia la forma, la dirección de la luz, la distancia, el desenfoque y la intensidad, y copia el CSS.
Funciona en tu navegador: nada de lo que escribes se envía a ningún sitio.
Cómo se usa
- Elige el color de la superficie. Los colores medios tirando a claros funcionan mejor; el blanco puro no deja margen para una sombra más clara.
- Ajusta la distancia, el desenfoque y la intensidad hasta que la profundidad te convenza.
- Elige una forma y de dónde viene la luz, y copia el CSS.
Cómo funciona
El CSS lleva dos sombras. La oscura se desplaza la distancia indicada en sentido contrario a la luz; la clara, hacia ella. Hundida pone las dos dentro del elemento con inset. Convexa y cóncava añaden un degradado sobre la superficie con la mitad de la intensidad: más claro en el lado iluminado en la convexa y más oscuro en la cóncava.
Ejemplo resuelto
Superficie #e0e5ec, distancia 20 px, desenfoque 40 px, intensidad 15 % y luz desde arriba a la izquierda. Rojo 224 × 0,85 = 190,4, verde 229 × 0,85 = 194,65, azul 236 × 0,85 = 200,6; redondeado, #bec3c9. Para la sombra clara, 224 × 1,15 y los demás canales pasan de 255, así que es #ffffff. El resultado es:
box-shadow: 20px 20px 40px #bec3c9, -20px -20px 40px #ffffff;
Consejos
- Un desenfoque de aproximadamente el doble de la distancia da el aspecto suave clásico.
- Usa la forma hundida para interruptores y botones activos, y la plana o la convexa para tarjetas y botones en reposo.
- En superficies oscuras baja la intensidad: allí la sombra clara se nota enseguida.
Preguntas frecuentes
¿Qué es el neumorfismo?
Un estilo de interfaz suave (Soft UI) en el que los elementos tienen el mismo color que el fondo y solo destacan por dos sombras, una más clara hacia la fuente de luz y otra más oscura en el lado contrario, de modo que parecen salir de la superficie.
¿Cómo se eligen los colores de las sombras?
Cada canal rojo, verde y azul del color de la superficie se multiplica por 1 + intensidad para la sombra clara y por 1 − intensidad para la oscura, y luego se limita a 0–255. Con una intensidad del 15 %, #e0e5ec da #ffffff y #bec3c9.
¿Por qué el fondo debe tener el mismo color?
El efecto se basa en que el elemento y la página parezcan del mismo material. Pon el CSS en un elemento cuyo padre tenga el mismo color de fondo, como en la vista previa; si no, las sombras parecen una sombra paralela corriente.
¿El neumorfismo es accesible?
El bajo contraste es su punto débil. Los botones dibujados solo con sombras suaves pueden costar de ver, sobre todo a personas con baja visión. Añade texto o iconos claros con suficiente contraste y un contorno de foco visible.