Gerador de Neumorfismo Soft UI
Crie efeitos CSS neumorfismo soft UI com sombras duplas personalizáveis e 4 tipos de forma.
① Escolha cor e forma ② Ajuste distância e blur ③ Copie o CSS
Soft UI
Presets de cor:
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 */
}O que é Neumorfismo?
O neumorfismo (Soft UI) é uma tendência UI que cria superfícies plásticas extrudidas combinando design plano e skeuomorfismo. Usa dois box-shadows duais — um claro (highlight) e um escuro (shadow) — com offsets opostos. CSS: box-shadow: 10px 10px 20px #darkColor, -10px -10px 20px #lightColor. Para a variante pressionada use a palavra-chave inset. As sombras são derivadas ajustando a luminosidade HSL em ±15–25%.
Perguntas Frequentes
O neumorfismo combina design plano e skeuomorfismo. Os elementos parecem extrudidos do fundo com box-shadows duplos.
Dois box-shadows com offsets opostos. Exemplo: box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff.
Plano: sombras fora. Côncavo: gradiente radial afundado. Convexo: elevado. Pressionado: sombras internas com inset.
Tons médios. Cores em torno de #e0e5ec ou #2d3436 são pontos de partida populares.
Tem problemas de acessibilidade: baixo contraste. O requisito WCAG 2.1 de 3:1 frequentemente não é atendido.
Melhor para widgets de dashboard, cartões, controles de reprodutor de música.
Calcule a luminosidade HSL, crie versão mais clara (+15-25%) e mais escura (-15-25%). A ferramenta calcula automaticamente.