Neumorfismo Design CSS Guia Completo

O neumorfismo surgiu em 2020 como tendência de design combinando skeuomorfismo e design plano. Cria a ilusão de elementos extrudados ou pressionados no fundo usando sombras cuidadosamente posicionadas.

A técnica baseia-se em uma paleta monocromática e duas sombras opostas — uma clara, uma escura — aplicadas ao mesmo elemento. Entender a matemática por trás disso desbloqueia resultados consistentes e profissionais.

O que é neumorfismo

O neumorfismo cria uma aparência suave e extrudada colocando uma sombra clara no canto superior esquerdo e uma escura no canto inferior direito. O fundo e o elemento compartilham a mesma cor base, criando uma fusão invisível. Ao contrário do design plano, o neumorfismo implica profundidade física sem detalhes fotorrealistas.

A técnica de sombra dupla

O núcleo do neumorfismo é a box-shadow dupla: uma sombra clara deslocada em direção à fonte de luz (canto superior esquerdo) e uma escura afastada dela (canto inferior direito). A cor da sombra é derivada clareando e escurecendo o tom de fundo em 10–15%. Ambas as sombras usam raio de desfoque de 20–30px.

Requisitos de cor

O neumorfismo funciona apenas em um intervalo de cores estreito. O fundo deve ser um tom médio e as sombras claras e escuras devem compartilhar o mesmo matiz. Este é o padrão CSS:

.card {
  background: #e0e5ec;
  box-shadow:
    8px 8px 20px #b8bec7,
    -8px -8px 20px #ffffff;
  border-radius: 12px;
}

Convexo vs côncavo

Elementos convexos (elevados) usam sombras para fora: clara canto superior esquerdo, escura canto inferior direito. Elementos côncavos (pressionados) usam sombras internas com a palavra-chave `inset`. Combinar sombras externas e internas pode simular um interruptor.

Problemas de acessibilidade

O baixo contraste do neumorfismo entre elemento e fundo frequentemente não atende aos requisitos WCAG 2.1 AA (mínimo 3:1 para componentes de UI). Soluções: aumentar opacidade da sombra, usar borda para estados de foco, ou reservar neumorfismo para elementos decorativos.

Quando usar neumorfismo

O neumorfismo funciona melhor para painéis, relógios, reprodutores de áudio e quiosques onde a estética de marca supera necessidades de acessibilidade. Evitar para navegação principal e interfaces com muito texto.

FAQ