Gerador de Neumorfismo

Crie efeitos soft UI (neumórficos) com sombras claras e escuras. Personalize forma, distância, desfoque e intensidade.

Como funciona: Escolha uma cor de fundo e ajuste a distância, desfoque e intensidade das sombras. Selecione um tipo de forma para ver diferentes efeitos neumórficos. Copie o CSS quando estiver pronto.

#e0e0e0
Forma
5px
10px
50%
16px
200px
border-radius: 16px;
background: #e0e0e0;
box-shadow: 5px 5px 10px #9d9d9d,
-5px -5px 10px #e9e9e9;

O que é Neumorfismo?

Neumorfismo (novo + esqueumorfismo) é um estilo de design que cria formas suaves e extrudadas usando sombras cuidadosamente elaboradas. Os elementos parecem se projetar ou se afundar na superfície do fundo. Combina design plano com efeitos de sombra realistas, usando duas sombras — uma clara e uma escura — sobre uma cor de fundo correspondente.

Como Funcionam as Sombras Neumórficas

O efeito requer dois box-shadows: uma sombra clara (deslocada para cima-esquerda) e uma sombra escura (deslocada para baixo-direita). Ambas as sombras são derivadas da cor de fundo — uma mais clara, outra mais escura. O elemento e seu contêiner pai devem compartilhar a mesma cor de fundo para que a ilusão funcione. Ajuste a distância e o desfoque para controlar a percepção de profundidade.

Tipos de Formas no Neumorfismo

Plano cria uma aparência de botão elevado com sombras externas. Côncavo faz a superfície parecer curvada para dentro usando um gradiente sutil. Convexo cria uma aparência arredondada e elevada. Pressionado simula um botão afundado usando sombras internas. Cada tipo de forma gera CSS diferente para o efeito visual desejado.

Dicas de Design para Neumorfismo

  • Sempre use uma cor de fundo neutra — branco puro ou cores muito saturadas quebram o efeito
  • Mantenha as distâncias de sombra proporcionais ao desfoque — tipicamente proporção 1:2
  • Use intensidade sutil para evitar sombras duras
  • Garanta contraste suficiente para texto e elementos interativos
  • Neumorfismo funciona melhor em cards, botões e toggles
  • Considere a acessibilidade — as bordas suaves podem ser difíceis de distinguir para alguns usuários