Cómo crear un efecto neumorphism (Soft UI) en CSS
Publicado el 15 de septiembre de 2026 · 2 min de lectura
El neumorfismo — el aspecto suave y aparentemente extruido de "soft UI" — depende de dos sombras compensadoras, una más clara y otra más oscura que el color base, posicionadas en esquinas opuestas. Esta herramienta calcula los colores de sombra correctos automáticamente a partir de tu color base y te permite previsualizar estados elevados o presionados.
Probar Generador de NeumorphismPasos
- 1
Abre el Generador de Neumorphism
Ve al generador de neumorphism.
- 2
Elige un color base
Elige el color de fondo del elemento — los colores claros y apagados funcionan mejor para este efecto.
- 3
Ajusta distancia, desenfoque e intensidad
Ajusta a qué distancia se sitúan las sombras del elemento y cuán pronunciado es el contraste claro/oscuro.
- 4
Elige elevado o presionado
Elige si el elemento debe verse como si sobresaliera o estuviera presionado hacia adentro.
Preguntas frecuentes
La herramienta aclara y oscurece tu color base elegido según la cantidad de intensidad que ajustes, generando automáticamente una sombra clara y oscura coincidente en lugar de requerir que las elijas por separado.
Elevado usa sombras exteriores regulares para un elemento que parece sobresalir de la superficie; presionado usa sombras internas (inset) para el aspecto opuesto, hundido hacia adentro.
Funciona mejor con colores de claros a medios, bastante desaturados, ya que el efecto depende de diferencias sutiles de brillo que son más difíciles de ver contra fondos muy oscuros o altamente saturados.
Como la matemática de las sombras ocurre automáticamente, obtienes sombras neumórficas correctamente equilibradas sin elegir manualmente dos colores separados por ensayo y error.