Generador de neumorfismo (Soft UI)
El neumorfismo simula elementos que emergen del propio fondo con dos sombras opuestas, una clara y otra oscura. Ajusta cada parámetro, elige de dónde viene la luz y copia el CSS.
Procesado 100% en tu navegador
Ctrl + Enter ejecutarCtrl + C copiar resultado
Cómo usar
- 1Elige el color base: el fondo y el elemento comparten el mismo color.
- 2Ajusta tamaño, radio, distancia, intensidad y desenfoque de las sombras.
- 3Selecciona la forma (plana, cóncava, convexa o hundida) y la dirección de la luz.
- 4Copia el CSS o comparte el enlace con tu diseño.
Casos de uso
- Botones, interruptores y controles con aspecto táctil.
- Tarjetas y paneles de dashboards minimalistas.
- Interfaces de domótica, reproductores de música o calculadoras.
- Explorar tendencias de diseño para mockups y Dribbble.
Preguntas frecuentes
¿Qué es el neumorfismo?
Un estilo de diseño (neumorphism o soft UI) en el que los elementos parecen moldeados en el mismo material que el fondo. Se consigue con dos box-shadow opuestas: una más clara hacia la luz y otra más oscura en el lado contrario.
¿Qué diferencia hay entre plana, cóncava, convexa y hundida?
La plana usa un color sólido; la cóncava y la convexa añaden un degradado que simula una superficie curvada hacia dentro o hacia fuera; la hundida usa sombras inset para que el elemento parezca presionado.
¿Es accesible el neumorfismo?
Su bajo contraste puede dificultar ver los límites de botones y campos. Combínalo con iconos claros, texto con contraste suficiente y estados de foco visibles.
¿Funciona sobre fondos oscuros?
Sí, pero baja la intensidad: en colores muy oscuros la sombra clara gana protagonismo. Funciona mejor con grises medios y colores pastel.