Generador de Neumorphism
Crea el look soft-UI extruido: sombras duales claras y oscuras, 4 modos de forma y control total sobre luz, profundidad y suavidad.
Consejo: el neumorphism necesita que el fondo del elemento coincida con el fondo de la página; el generador configura ambos.
Cómo usar el generador de Neumorphism
- Elige un color base: el soft UI funciona mejor con colores claros y ligeramente apagados.
- Elige la dirección de la fuente de luz; las sombras caen en el lado opuesto.
- Afina Distancia y Desenfoque para la profundidad, e Intensidad para el contraste entre sombra clara y oscura.
- Cambia entre las formas Plano, Cóncavo, Convexo y Presionado para botones, tarjetas e inputs.
- Copia el CSS (par background + box-shadow) o la clase Tailwind a tu proyecto.
Acerca de este generador de Neumorphism
El neumorphism (soft UI) hace que los elementos parezcan extruidos del fondo combinando dos sombras: una sombra oscura a un lado y un brillo claro al otro, con el elemento relleno del mismo color que el fondo de la página. El resultado es un estilo de interfaz suave, táctil, casi físico, para tarjetas, botones e interruptores.
Este generador calcula automáticamente los colores de sombra clara y oscura a partir de tu color base y los combina con cuatro modos de forma: plano (extrusión clásica), cóncavo y convexo (rellenos en gradiente para superficies curvas) y presionado (sombras inset para estados hundidos). Recuerda: el fondo del elemento debe coincidir con el fondo de la página para que la ilusión funcione; la vista previa muestra ambos juntos.
FAQ de Neumorphism
¿Por qué no funciona el neumorphism en mi página?
El estilo depende de que el elemento se funda con su fondo: el elemento debe usar el mismo color de fondo (o uno muy cercano) que la superficie detrás. Si el fondo de tu página difiere del color base elegido, actualiza uno de ellos; por eso el generador pinta el escenario de vista previa con el mismo color.
¿Qué colores funcionan mejor para soft UI?
Los colores claros y ligeramente desaturados (alrededor del 85–95% de luminosidad) funcionan mejor porque tanto el brillo más claro como la sombra más oscura siguen siendo visibles. El blanco puro mata el brillo; el negro puro mata la sombra. El deslizador de Intensidad controla cuánto se separan los dos tonos del color base.
¿Cuál es la diferencia entre cóncavo y convexo?
Ambos añaden un sutil relleno de gradiente lineal sobre las sombras duales. Convexo abulta hacia el espectador (más claro hacia la fuente de luz), como un botón elevado. Cóncavo se curva hacia adentro, como un plato llano: útil para huecos y campos de entrada. Presionado usa sombras inset, para un estado activo/hundido.
¿Es accesible el neumorphism?
El soft UI es de bajo contraste por naturaleza, así que úsalo para contenedores decorativos en lugar de controles críticos. Asegúrate de que el texto y los iconos cumplan las ratios de contraste WCAG, y considera añadir un contorno de foco a los elementos interactivos.
¿Cómo se calculan los colores de sombra clara y oscura?
El generador aclara el color base hacia el blanco para el brillo y lo oscurece hacia el negro para la sombra, escalado por el deslizador de Intensidad. Esto mantiene ambos tonos en la misma familia de matiz, que es lo que hace que el efecto se sienta suave y natural.