Generador de neumorphism (soft UI)
Genera y copia CSS de soft UI en relieve, hundido o plano con doble sombra a partir de un color base
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
A partir de un único color base, la herramienta calcula a la vez una sombra clara y otra oscura para crear el estilo soft UI (neumorphism) de aspecto suavemente hundido. Ajustas el tamaño, el redondeo, la distancia de la sombra, el desenfoque y la intensidad del contraste, eliges la forma en relieve, hundida o plana y copias el CSS junto con una vista previa en tiempo real.
Cómo usar
- Elige un color base y se calcularán automáticamente la doble sombra clara y oscura.
- Selecciona con las pestañas la forma de superficie que prefieras: plana, en relieve o hundida.
- Afina la textura con los deslizadores de tamaño, redondeo, distancia de la sombra, desenfoque e intensidad del contraste.
- Copia el CSS terminado con border-radius, background y box-shadow y úsalo.
Preguntas frecuentes
- Lo he aplicado pero no se ve la sombra.
- El neumorphism solo se ve natural cuando el elemento y «el color de fondo del elemento padre son iguales». Si pones una tarjeta gris clara sobre un fondo blanco, la sombra clara se pierde. Ajusta también el fondo del contenedor padre al mismo color base.
- ¿En qué se diferencian relieve, hundido y plano?
- El plano tiene una superficie de un solo color y parece flotar hacia fuera; el relieve añade un degradado de claro a oscuro y parece abombado; el hundido invierte el degradado y parece presionado hacia dentro. La dirección de la sombra es la misma en los tres.
- ¿Los colores de la sombra pueden diferir de las herramientas de diseño reales?
- Los colores claro y oscuro son valores aproximados que se obtienen mezclando el color base con blanco y negro, así que pueden variar ligeramente según la herramienta; son orientativos. Si lo necesitas, ajusta con precisión los valores rgb tras copiarlos. Todos los cálculos se procesan en el navegador.