Generador de Neumorfismo
Genera CSS neumórfico de soft UI con sombras emparejadas, color de superficie, radio y formas planas, cóncavas o convexas, directamente en tu navegador.
🔒 Se ejecuta completamente en tu navegador — nada se cargaGenera sombras soft UI
El neumorfismo crea profundidad colocando un elemento sobre una superficie del mismo color base y añadiendo después dos sombras opuestas: una clara y otra oscura. El resultado hace que los controles parezcan ligeramente elevados sobre la página o hundidos en ella. Este generador de neumorfismo te permite ajustar las variables más importantes: color de fondo, distancia de la sombra, desenfoque, intensidad, radio del borde y forma de la superficie. La vista previa se actualiza al instante para que veas cómo pequeños cambios afectan a la ilusión de luz suave.
El CSS generado incluye un fondo, un radio de borde y una box-shadow doble. El modo plano mantiene el color de la superficie uniforme, mientras que los modos cóncavo y convexo añaden un degradado sutil para sugerir una hendidura o una elevación redondeada. Como los efectos neumórficos dependen mucho del color de la página, copia tanto el fondo del escenario como los estilos del componente si quieres reproducir con exactitud la vista previa en otro proyecto.
Elegir distancia, desenfoque e intensidad
La distancia controla cuánto se alejan del elemento las sombras clara y oscura. Distancias mayores hacen que el componente parezca más elevado, pero también pueden resultar poco realistas si el desenfoque es demasiado bajo. El desenfoque suaviza el borde de la sombra, algo esencial para el aspecto suave típico del soft UI. La intensidad controla la opacidad: los valores bajos son sutiles y tranquilos, mientras que los altos crean un efecto en relieve más marcado. Un diseño equilibrado suele usar un desenfoque medio, una distancia moderada y la intensidad justa para mostrar la forma sin eclipsar el contenido cercano.
Accesibilidad y uso real en interfaces
El neumorfismo funciona mejor en tarjetas decorativas, interruptores, paneles y botones de icono que además tengan etiquetas claras. Evita depender solo de la sombra para comunicar el estado, ya que las superficies elevadas de bajo contraste pueden ser difíciles de percibir para muchos usuarios. Añade contornos de foco visibles, estados activos y un contraste de texto que cumpla los requisitos de accesibilidad. Tras copiar el CSS, pruébalo sobre el fondo real de la página y con el tamaño real del componente. Una sombra suave que se ve elegante aislada puede necesitar más contraste o un radio más sencillo en una interfaz densa.
Cómo usar
- Elige el color de la superficieSelecciona el fondo de la página o de la tarjeta sobre el que se apoya el elemento soft UI.
- Ajusta la geometría de la sombraModifica la distancia, la intensidad, el desenfoque, el radio y el estilo de la forma.
- Copia el CSSPega las reglas generadas de background, border-radius y box-shadow.