Generador de neumorfismo CSS
Ajuste el color de fondo, la distancia, el desenfoque y la intensidad para componer un efecto neumorfismo (sombra suave que imita un relieve) y obtenga el código CSS correspondiente, con vista previa en directo. El cálculo se realiza por completo en su navegador.
Cómo funciona
El neumorfismo da la ilusión de que un elemento está ligeramente en relieve o hundido en su fondo, gracias a dos sombras opuestas del mismo color que el fondo: una más clara hacia arriba a la izquierda y otra más oscura hacia abajo a la derecha. Esta herramienta calcula ambos tonos a partir del color de fondo elegido y compone en directo la propiedad box-shadow correspondiente.
¿Por qué las dos sombras deben tener el mismo color base?
El efecto neumorfismo se basa en una variación de luminosidad de un único color (el fondo), y no en colores contrastados como en una sombra clásica; esa proximidad de tono es lo que da la sensación suave y «moldeada» característica del estilo, en lugar de una sombra proyectada tradicional.
¿En qué elementos conviene usar este efecto?
El neumorfismo funciona bien en botones, tarjetas, campos de formulario o iconos sobre un fondo liso, claro u oscuro; en cambio, es difícil de leer sobre un fondo con imagen o degradado y a veces plantea problemas de accesibilidad por falta de contraste, algo que conviene probar antes de usarlo a gran escala.
No se envía ningún dato a un servidor: la composición de la sombra se realiza por completo en su navegador.