Generador de Neumorfismo

Crea efectos soft UI (neumórficos) con sombras claras y oscuras. Personaliza forma, distancia, desenfoque e intensidad.

Cómo funciona: Elige un color de fondo y ajusta la distancia, desenfoque e intensidad de las sombras. Selecciona un tipo de forma para ver diferentes efectos neumórficos. Copia el CSS cuando esté listo.

#e0e0e0
Forma
5px
10px
50%
16px
200px
border-radius: 16px;
background: #e0e0e0;
box-shadow: 5px 5px 10px #9d9d9d,
-5px -5px 10px #e9e9e9;

¿Qué es el Neumorfismo?

El Neumorfismo (nuevo + esqueumorfismo) es un estilo de diseño que crea formas suaves y extruidas usando sombras cuidadosamente elaboradas. Los elementos parecen sobresalir o hundirse en la superficie del fondo. Combina el diseño plano con efectos de sombra realistas, usando dos sombras — una clara y una oscura — sobre un color de fondo que coincida.

Cómo Funcionan las Sombras Neumórficas

El efecto requiere dos box-shadows: una sombra clara (desplazada arriba-izquierda) y una sombra oscura (desplazada abajo-derecha). Ambas sombras se derivan del color de fondo — una más clara, otra más oscura. El elemento y su contenedor padre deben compartir el mismo color de fondo para que la ilusión funcione. Ajusta la distancia y el desenfoque para controlar la percepción de profundidad.

Tipos de Formas en Neumorfismo

Plano crea un aspecto de botón elevado con sombras externas. Cóncavo hace que la superficie parezca curvada hacia adentro usando un gradiente sutil. Convexo crea una apariencia redondeada y elevada. Presionado simula un botón hundido usando sombras internas. Cada tipo de forma genera CSS diferente para el efecto visual deseado.

Consejos de Diseño para Neumorfismo

  • Siempre usa un color de fondo neutro — el blanco puro o colores muy saturados rompen el efecto
  • Mantén las distancias de sombra proporcionales al desenfoque — típicamente ratio 1:2
  • Usa intensidad sutil para evitar sombras duras
  • Asegura suficiente contraste para texto y elementos interactivos
  • El neumorfismo funciona mejor en tarjetas, botones y toggles
  • Considera la accesibilidad — los bordes suaves pueden ser difíciles de distinguir para algunos usuarios