Generador de Neumorphism CSS para sombras Soft UI
Este generador de neumorphism CSS construye efectos de sombra Soft UI de forma visual, para que nunca tengas que escribir a mano la doble box-shadow. Elige un color base, escoge una forma, mueve algunos deslizadores y copia un CSS listo para producción. Está pensado para diseñadores y desarrolladores front-end que quieren tarjetas, botones y campos neumórficos sin programar a base de prueba y error.
El neumorphism (también llamado Soft UI) combina dos sombras —una clara y una oscura— para que un elemento parezca sobresalir de la superficie o hundirse en ella. El generador deriva esos colores de sombra coincidentes a partir de tu color base de forma automática, y luego muestra una vista previa en vivo y el CSS exacto mientras lo ajustas.
Cómo usar el generador de neumorphism
Elige un color base
Define tu fondo con el selector de color o escribe un valor hex. Los tonos claros y neutros, como los grises, funcionan mejor porque dejan suficiente margen para la sombra clara y la oscura.
Selecciona un tipo de forma
Alterna entre Plano, Presionado, Cóncavo y Convexo. Usa Plano para tarjetas en relieve y Presionado para estados activos o pulsados.
Ajusta las sombras
Regula Distancia (0–50px), Desenfoque (0–100px), Intensidad (0–100%), Radio de borde (0–100px) y el Tamaño de la vista previa (80–400px). Cada deslizador tiene un campo numérico asociado para valores exactos.
Define la dirección de la luz
Elige de dónde proviene la luz virtual: Superior izquierda, Superior derecha, Inferior izquierda o Inferior derecha. Esto decide qué lado recibe la sombra clara y cuál la oscura. Superior izquierda es la opción más natural.
Copia el CSS
Haz clic en Copiar CSS y pega el resultado en tu hoja de estilos. Recuerda darle al contenedor padre el mismo color base para que la ilusión neumórfica se mantenga.
Funciones
Color base con sombras automáticas
Elige un color base con el selector o la entrada hex, y los colores de la sombra clara y oscura se derivan automáticamente para un resultado natural y armonioso.
Cuatro tipos de forma
Crea efectos Plano (en relieve), Presionado (inset), Cóncavo (degradado hacia dentro) y Convexo (degradado hacia fuera), y cambia al instante para compararlos.
Controles de sombra precisos
Afina distancia, desenfoque e intensidad con deslizadores que tienen, cada uno, un campo numérico sincronizado para valores exactos.
Controles de radio y tamaño
Define el redondeo de las esquinas hasta 100px y redimensiona el elemento de la vista previa de 80 a 400px para ver el efecto a la escala que necesites.
Control de la dirección de la luz
Elige entre cuatro direcciones de la fuente de luz; los desplazamientos de la sombra y los ángulos del degradado se ajustan automáticamente.
Varias vistas previas de elementos
Previsualiza el efecto en una Tarjeta, un Botón, un Círculo o un Campo para ver cómo luce en distintos contextos de la interfaz.
Vista previa con fondo oscuro
Activa la Vista oscura para revisar el diseño sobre una superficie más oscura; lo visual se recalcula mientras el CSS exportado conserva tu color original.
Seis ajustes de inicio rápido
Comienza desde Sutil, Medio, Fuerte, Presionado, Cóncavo o Convexo, y luego afina con los deslizadores.
CSS en vivo y copia de un clic
El CSS de background y box-shadow generado se actualiza en tiempo real, listo para copiar con un solo clic.
Preguntas frecuentes
¿Qué es el neumorphism (Soft UI)?
El neumorphism, o Soft UI, es un estilo de diseño que combina superficies planas con sombras dobles sutiles para que los elementos parezcan sobresalir del fondo o hundirse en él. Usa una sombra clara y una oscura para simular una profundidad suave y realista.
¿Por qué el generador usa dos box-shadow (clara + oscura)?
Una sola sombra oscurece únicamente un lado. El neumorphism necesita una sombra clara en el lado que mira hacia la fuente de luz y una sombra oscura en el lado opuesto, para que el elemento parezca elevarse de la superficie. El generador genera ambas sombras en una sola declaración box-shadow por ti.
¿Por qué mi efecto de neumorphism no se ve bien?
La causa más común es una diferencia entre el fondo del elemento y el de su contenedor padre. El neumorphism requiere que ambos tengan el mismo color, así que aplica el color de fondo generado tanto al elemento como a su contenedor padre.
¿Qué colores funcionan mejor para el neumorphism?
Los colores neutros y de tono medio funcionan mejor: grises claros como #e0e0e0 o pasteles suaves. Los colores muy oscuros o muy claros reducen el contraste entre la sombra clara y la oscura y dificultan ver el efecto, así que evita el blanco puro y el negro puro.
¿Cómo creo un efecto neumórfico presionado (inset)?
Selecciona el tipo de forma Presionado. Cambia la box-shadow a inset, así el elemento parece hundido en la superficie: ideal para estados activos, con foco o pulsados. El ajuste Presionado te da un punto de partida listo.
¿Cuál es la diferencia entre Cóncavo y Convexo?
Cóncavo añade un degradado que va de oscuro a claro para dar la ilusión de una curva hacia dentro, mientras que Convexo va de claro a oscuro para una curva hacia fuera. Ambos conservan la misma doble sombra en relieve que Plano.
¿La Vista oscura cambia el CSS generado?
No. La Vista oscura es solo para visualización: el CSS generado siempre refleja tu color base original. Para crear CSS para un tema oscuro, cambia el propio color base a un tono oscuro.
¿En qué se diferencia el neumorphism del glassmorphism y el skeuomorphism?
El neumorphism usa sombras dobles coincidentes sobre una única superficie plana para dar profundidad suave. El glassmorphism se basa en el desenfoque y la transparencia del fondo para un aspecto de vidrio esmerilado, mientras que el skeuomorphism imita texturas y materiales del mundo real. El neumorphism es el punto medio minimalista y monocromo.
¿Es accesible el neumorphism?
El neumorphism tiene un contraste naturalmente bajo, así que úsalo sobre todo para contenedores decorativos y no para controles interactivos críticos. Mantén el texto sobre superficies neumórficas con una relación de contraste suficiente, y refuerza botones y campos con etiquetas claras, estilos de foco y bordes.
¿Puedo usar el CSS con cualquier framework?
Sí. La salida usa las propiedades estándar background, box-shadow y border-radius, que funcionan con Tailwind, Bootstrap o CSS puro: solo aplícalas a tu elemento.
Aún no hay comentarios. ¡Sé el primero en comentar!