Como criar um efeito neumorphism (Soft UI) em CSS
Publicado em 15 de setembro de 2026 · 2 min de leitura
O neumorphism — o visual suave e aparentemente extrudado de "soft UI" — depende de duas sombras compensatórias, uma mais clara e outra mais escura que a cor base, posicionadas em cantos opostos. Esta ferramenta calcula as cores de sombra corretas automaticamente a partir da sua cor base e permite pré-visualizar estados elevados ou pressionados.
Experimentar Gerador de NeumorphismPassos
- 1
Abra o Gerador de Neumorphism
Acesse o gerador de neumorphism.
- 2
Escolha uma cor base
Escolha a cor de fundo do elemento — cores claras e suaves funcionam melhor para este efeito.
- 3
Defina distância, desfoque e intensidade
Ajuste a que distância as sombras ficam do elemento e quão pronunciado é o contraste claro/escuro.
- 4
Escolha elevado ou pressionado
Escolha se o elemento deve parecer que está saltando para fora ou pressionado para dentro.
Perguntas frequentes
A ferramenta clareia e escurece sua cor base escolhida pela quantidade de intensidade que você definir, gerando automaticamente uma sombra clara e escura correspondente em vez de exigir que você as escolha separadamente.
Elevado usa sombras externas regulares para um elemento que parece estar saltando para fora da superfície; pressionado usa sombras internas (inset) para o visual oposto, afundado para dentro.
Funciona melhor com cores de claras a médias, razoavelmente dessaturadas, já que o efeito depende de diferenças sutis de brilho que são mais difíceis de ver contra fundos muito escuros ou altamente saturados.
Como a matemática de sombra acontece automaticamente, você obtém sombras neumórficas corretamente equilibradas sem escolher manualmente duas cores separadas por tentativa e erro.