Generador de neumorfismo (soft UI) CSS
Elige el color de fondo: el elemento usa el mismo color y las sombras se calculan a partir de él. Prueba las cuatro formas.
Cómo usarBotones y tarjetas que sobresalen del fondo
Disponible en: 
Generador de neumorfismo (soft UI) CSS: para qué sirve
El neumorfismo, o soft UI, hace que botones y tarjetas parezcan moldeados en el propio fondo, con una sombra clara de un lado y una oscura del otro.
Elige el color y el generador calcula las dos sombras a partir de él, con tamaño, esquinas, distancia, desenfoque, intensidad y la dirección de la luz. Hay cuatro formas: plana, cóncava y convexa (con un degradado sutil) y presionada (sombras internas). La página explica el cuidado con el contraste, el punto débil de este estilo.
Cómo usar
- Elige el color de fondo.
- Ajusta la distancia, el desenfoque, la intensidad y la luz.
- Elige la forma y copia el CSS.
Cuándo usar
- Botones y tarjetas en paneles.
- Controles de reproductor o de app.
- Detalles decorativos en landing pages.
Preguntas frecuentes
¿Cómo funciona el neumorfismo?
El elemento tiene el mismo color que el fondo y dos sombras: una más clara del lado de donde viene la luz y otra más oscura del lado opuesto. Eso da la impresión de relieve, como si el elemento estuviera moldeado en el propio fondo.
¿El neumorfismo es accesible?
Con cuidado. Como el elemento tiene el mismo color que el fondo, su borde tiene poco contraste y puede desaparecer para quienes ven poco. Úsalo en detalles decorativos y tarjetas, asegura el contraste en el texto y los íconos, y no dependas solo del relieve para mostrar que algo es un botón.
¿Funciona en fondo oscuro?
Funciona, pero el efecto es más sutil. En colores muy oscuros o muy claros la sombra del lado extremo casi no se nota; los tonos medios dan el resultado más visible.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.