Gerador de Neumorphism
Crie o visual soft-UI extrudado: sombras duplas claras e escuras, 4 modos de forma e controle total sobre luz, profundidade e suavidade.
Dica: o neumorphism precisa que o fundo do elemento corresponda ao fundo da página — o gerador configura ambos para você.
Como usar o gerador de Neumorphism
- Escolha uma cor base — soft UI funciona melhor com cores claras e levemente suavizadas.
- Escolha a direção da fonte de luz; as sombras caem no lado oposto.
- Ajuste Distância e Desfoque para a profundidade, e Intensidade para o contraste entre sombra clara e escura.
- Alterne entre as formas Plano, Côncavo, Convexo e Pressionado para botões, cartões e inputs.
- Copie o CSS (par background + box-shadow) ou a classe Tailwind para o seu projeto.
Sobre este gerador de Neumorphism
Neumorphism (soft UI) faz os elementos parecerem extrudados do fundo combinando duas sombras: uma sombra escura de um lado e um brilho claro do outro, com o elemento preenchido com a mesma cor do fundo da página. O resultado é um estilo de interface suave, tátil, quase físico, para cartões, botões e toggles.
Este gerador calcula as cores de sombra clara e escura a partir da sua cor base automaticamente e as combina com quatro modos de forma: plano (extrusão clássica), côncavo e convexo (preenchimentos em gradiente para superfícies curvas) e pressionado (sombras inset para estados afundados). Lembre-se: o fundo do elemento deve corresponder ao fundo da página para a ilusão funcionar — a pré-visualização mostra ambos juntos.
FAQ de Neumorphism
Por que o neumorphism não funciona na minha página?
O estilo depende da fusão do elemento com seu fundo: o elemento deve usar a mesma cor de fundo (ou muito próxima) da superfície atrás. Se o fundo da sua página difere da cor base escolhida, atualize um deles — é por isso que o gerador pinta o palco de pré-visualização com a mesma cor.
Quais cores funcionam melhor para soft UI?
Cores claras e levemente dessaturadas (cerca de 85–95% de luminosidade) funcionam melhor porque tanto o brilho mais claro quanto a sombra mais escura permanecem visíveis. Branco puro mata o brilho; preto puro mata a sombra. O controle de Intensidade controla o quanto os dois tons se afastam da cor base.
Qual a diferença entre côncavo e convexo?
Ambos adicionam um sutil preenchimento de gradiente linear sobre as sombras duplas. Convexo abaula em direção ao espectador (mais claro em direção à fonte de luz), como um botão elevado. Côncavo curva para dentro, como um prato raso — útil para cavidades e campos de entrada. Pressionado usa sombras inset, para um estado ativo/afundado.
Neumorphism é acessível?
Soft UI é de baixo contraste por natureza, então use-o para contêineres decorativos em vez de controles críticos. Garanta que texto e ícones atendam às taxas de contraste WCAG, e considere adicionar um contorno de foco aos elementos interativos.
Como as cores de sombra clara e escura são calculadas?
O gerador clareia a cor base em direção ao branco para o brilho e escurece em direção ao preto para a sombra, escalado pelo controle de Intensidade. Isso mantém ambos os tons na mesma família de matiz, que é o que faz o efeito parecer suave e natural.