Generador de neumorfismo
Superficies soft UI a partir de un solo color: sombras clara y oscura, cuatro formas, profundidad y dirección de la luz ajustables.
Cómo funciona el generador de neumorfismo
Genera CSS soft UI a partir de un solo color de superficie (sombras, degradados y radio) con vista previa en vivo.
Un solo color
Elige el color de la superficie y la herramienta calcula las dos sombras (una más oscura y otra más clara), para que el elemento parezca extruido del fondo sobre el que está.
Cuatro formas
La plana queda a ras de la superficie, la convexa sobresale, la cóncava se hunde (ambas gracias a un degradado sutil) y la presionada usa sombras inset para crear un hueco hundido.
Dirección de la luz
Elige de qué esquina viene la luz: las sombras clara y oscura cambian de lado en consecuencia para encajar con el resto de tu interfaz.
Control de la profundidad
La distancia, la intensidad y el desenfoque controlan cuánto parece elevarse el elemento. El desenfoque sigue automáticamente a la distancia en una proporción natural, y después puedes afinarlo.
Preguntas frecuentes
Un estilo soft UI en el que los elementos comparten el color del fondo y parecen extruidos o presionados solo gracias a un par de sombras, una clara y otra oscura: sin bordes ni rellenos de contraste.
La ilusión funciona porque el elemento y la página comparten una misma superficie. Si los colores son distintos, se percibe como una tarjeta normal con sombra y no como una extrusión.
Su bajo contraste es la principal crítica. Úsalo en superficies decorativas y controles grandes, mantén el contraste del texto dentro de WCAG y añade estados de foco claros: no confíes solo en las sombras para indicar que un elemento es interactivo.
Añaden un degradado diagonal sutil sobre las mismas sombras: la convexa va de claro a oscuro (sobresale) y la cóncava de oscuro a claro (se hunde). La presionada, en cambio, lleva las sombras hacia dentro con inset.