Generador de Neumorfismo Soft UI
Crea efectos CSS neumorfismo soft UI con sombras duales personalizables y 4 tipos de forma.
① Elige color y forma ② Ajusta distancia y blur ③ Copia el CSS
Soft UI
Presets de color:
light#ffffff
dark#b0bdcf
150px
16px
10px
20px
15%
Código CSS
.neumorphic {
background: #e0e5ec;
border-radius: 16px;
box-shadow: 10px 10px 20px #b0bdcf, -10px -10px 20px #ffffff;
/* light: #ffffff | dark: #b0bdcf */
}¿Qué es el Neumorfismo?
El neumorfismo (Soft UI) es una tendencia UI que crea superficies plásticas extruidas combinando diseño plano y skeuomorfismo. Usa dos box-shadows duales — uno claro (highlight) y uno oscuro (shadow) — con offsets opuestos. CSS: box-shadow: 10px 10px 20px #darkColor, -10px -10px 20px #lightColor. Para la variante presionada usa la palabra clave inset. Los colores de sombra se derivan ajustando la luminosidad HSL en ±15–25%.
Preguntas Frecuentes
El neumorfismo combina diseño plano y skeuomorfismo. Los elementos parecen extruidos del fondo usando box-shadows duales.
Dos box-shadows con offsets opuestos. Ejemplo: box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff.
Plano: sombras fuera. Cóncavo: gradiente radial hundido. Convexo: elevado. Presionado: sombras internas con inset.
Los tonos medios. Colores alrededor de #e0e5ec o #2d3436 son puntos de partida populares.
Tiene problemas de accesibilidad: bajo contraste. El requisito WCAG 2.1 de 3:1 frecuentemente no se cumple.
Mejor para widgets de dashboard, tarjetas, controles de reproductor de música.
Calcula la luminosidad HSL, crea versión más clara (+15-25%) y más oscura (-15-25%). La herramienta calcula automáticamente.