Este generador de neumorphism (también llamado soft UI) crea ese efecto de relieve suave tan característico, en el que los elementos parecen extruidos de la propia superficie. Ajusta color, relieve y radio, y copia el CSS con las dos sombras. Funciona en tu navegador, sin registro y en español.
Cómo crear un efecto neumorphism
- Elige el color base (funciona mejor con grises y tonos claros).
- Ajusta el tipo, el radio, la distancia y la intensidad.
- Copia el CSS y aplícalo a tu tarjeta o botón.
El truco de las dos sombras
El neumorphism se basa en aplicar dos box-shadow a la vez: una oscura abajo-derecha y otra clara arriba-izquierda, ambas derivadas del color de fondo. Eso simula una luz cenital y da sensación de relieve. El fondo del elemento debe ser el mismo que el de su contenedor. Para efectos de cristal en su lugar, prueba nuestro generador de glassmorphism.
Preguntas frecuentes
¿Por qué no se ve el relieve sobre fondo blanco puro?
El neumorphism necesita un fondo con algo de tono (un gris muy claro, por ejemplo) para que la sombra clara sea visible. Sobre blanco puro casi no se aprecia.
¿Es accesible?
Tiene fama de tener poco contraste, así que úsalo con cuidado en botones y controles importantes y comprueba siempre el contraste del texto.
¿Qué diferencia hay entre cóncavo y convexo?
El convexo parece que sobresale hacia fuera y el cóncavo parece hundido, gracias a un ligero degradado en el fondo.
¿Te ha sido útil este contenido? Puedes invitarme a un café para ayudar a mantener el proyecto.
Invítame a un café
