Gerador de neumorfismo (Soft UI)
O neumorfismo faz os elementos parecerem surgir do próprio fundo com duas sombras opostas, uma clara e outra escura. Ajuste cada parâmetro, escolha de onde vem a luz e copie o CSS.
Processado 100% no seu navegador
Ctrl + Enter executarCtrl + C copiar resultado
Como usar
- 1Escolha a cor base: o fundo e o elemento compartilham a mesma cor.
- 2Ajuste tamanho, raio, distância, intensidade e desfoque das sombras.
- 3Selecione a forma (plana, côncava, convexa ou pressionada) e a direção da luz.
- 4Copie o CSS ou compartilhe um link para o seu design.
Casos de uso
- Botões, interruptores e controles com aparência tátil.
- Cards e painéis de dashboards minimalistas.
- Interfaces de casa inteligente, players de música ou calculadoras.
- Explorar tendências de design para mockups e Dribbble.
Perguntas frequentes
O que é neumorfismo?
Um estilo de design (neumorphism ou soft UI) em que os elementos parecem moldados no mesmo material do fundo. Usa duas box-shadow opostas: uma mais clara voltada para a luz e outra mais escura do lado contrário.
Qual a diferença entre plana, côncava, convexa e pressionada?
A plana usa uma cor sólida; côncava e convexa adicionam um gradiente que simula uma superfície curvada para dentro ou para fora; pressionada usa sombras inset para o elemento parecer afundado.
O neumorfismo é acessível?
O baixo contraste pode dificultar a percepção dos limites de botões e campos. Combine-o com ícones claros, texto com contraste suficiente e estados de foco visíveis.
Funciona em fundos escuros?
Sim, mas reduza a intensidade: em cores muito escuras a sombra clara domina. Funciona melhor com cinzas médios e cores pastel.