Generador de neumorfismo

Diseña elementos de "interfaz suave" (soft UI) que parecen moldeados en el mismo material que el fondo, salientes o hundidos. Copia el CSS.

¿Qué es el neumorfismo?

El neumorfismo simula una luz que ilumina la página desde una esquina. Cada elemento tiene el mismo color que el fondo y dos sombras:

• una clara del lado de donde viene la luz,
• una oscura del lado contrario.

body { background: #e0e5ec; }

.neumorfismo {
  background: #e0e5ec;
  border-radius: 40px;
  box-shadow:
    16px 16px 32px #c1cad6,   /* sombra oscura (abajo a la derecha) */
    -16px -16px 32px #ffffff; /* luz (arriba a la izquierda) */
}

Las variantes cambian el relleno: cóncavo y convexo usan un degradado suave para parecer hundido o abombado, y presionado usa sombras inset (interiores).

Generador

Elige un color base: el generador calcula automáticamente la sombra clara y la oscura aclarando y oscureciendo ese color. Cambia la forma y la dirección de la luz.

Generador de neumorfismo

Color base

Dirección de la luz

Sombras

DistanciapxIntensidad Desenfoque automático (2 × distancia)

Elemento

TamañopxRadiopx

/* El fondo de la página debe ser del MISMO color que el elemento */
body {
  background: #e0e5ec;
}

.neumorfismo {
  width: 200px;
  height: 200px;
  border-radius: 40px;
  background: #e0e5ec;
  box-shadow:
    16px 16px 32px #b9c5d4,
    -16px -16px 32px #ffffff;
}

Consejos de uso

• El fondo de la página debe ser del mismo color que el elemento, si no, el efecto se rompe. Por eso el CSS generado incluye el body.
• Funciona mejor con colores claros y poco saturados (grises, pasteles). En colores oscuros baja la intensidad.
• La forma presionada es perfecta para el estado activo de un botón o un interruptor: cambia de plano a presionado en :active.
• Mantén la misma dirección de luz en toda la interfaz: si un elemento tiene la luz arriba a la izquierda, todos deberían tenerla igual.
• Mezcla neumorfismo con un color de acento (por ejemplo, el ícono o el texto activo en violeta) para que los elementos interactivos se distingan.

Buena práctica

Añade transition: box-shadow 0.2s ease; y cambia a la versión inset en :active: el botón parecerá hundirse físicamente al hacer clic.

Error común

El neumorfismo tiene muy poco contraste: los botones casi no se distinguen del fondo y eso es un problema de accesibilidad. No lo uses para todo: añade bordes, íconos o color a los elementos importantes y revisa que el texto tenga un contraste mínimo de 4.5:1.