Gerador de Neumorfismo
Gere CSS neumórfico de soft UI com sombras emparelhadas, cor da superfície, raio e formas planas, côncavas ou convexas, diretamente no navegador.
🔒 Executa completamente no seu navegador — nada é enviadoGere sombras soft UI
O neumorfismo cria profundidade ao colocar um elemento numa superfície com a mesma cor de base e adicionar duas sombras opostas: uma clara e outra escura. O resultado faz com que os controlos pareçam suavemente elevados da página ou pressionados nela. Este gerador de neumorfismo permite ajustar as variáveis mais importantes: cor de fundo, distância da sombra, desfoque, intensidade, raio da borda e forma da superfície. A pré-visualização é atualizada instantaneamente para que veja como pequenas alterações afetam a ilusão de luz suave.
O CSS gerado inclui um fundo, um raio de borda e uma box-shadow dupla. O modo plano mantém a cor da superfície uniforme, enquanto os modos côncavo e convexo adicionam um gradiente subtil para sugerir uma depressão ou uma elevação arredondada. Como os efeitos neumórficos dependem muito da cor da página, copie tanto o fundo do palco como os estilos do componente se quiser reproduzir fielmente a pré-visualização noutro projeto.
Escolher distância, desfoque e intensidade
A distância controla o afastamento das sombras clara e escura em relação ao elemento. Distâncias maiores fazem o componente parecer mais elevado, mas também podem parecer pouco realistas se o desfoque for demasiado baixo. O desfoque suaviza a borda da sombra, o que é essencial para o aspeto liso do soft UI. A intensidade controla a opacidade: valores baixos são subtis e calmos, enquanto valores altos criam um efeito de relevo mais forte. Um design equilibrado costuma usar desfoque médio, distância moderada e intensidade suficiente para mostrar a forma sem ofuscar o conteúdo próximo.
Acessibilidade e uso real em interfaces
O neumorfismo funciona melhor em cartões decorativos, interruptores, painéis e botões de ícone que também tenham rótulos claros. Evite depender apenas da sombra para comunicar o estado, porque superfícies elevadas de baixo contraste podem ser difíceis de perceber para muitos utilizadores. Adicione contornos de foco visíveis, estados ativos e um contraste de texto que cumpra os requisitos de acessibilidade. Depois de copiar o CSS, teste-o no fundo real da página e no tamanho real do componente. Uma sombra suave que fica elegante isolada pode precisar de mais contraste ou de um raio mais simples numa interface densa.
Como usar
- Escolha a cor da superfícieSelecione o fundo da página ou do cartão sobre o qual o elemento soft UI assenta.
- Ajuste a geometria da sombraModifique a distância, a intensidade, o desfoque, o raio e o estilo da forma.
- Copie o CSSCole as regras geradas de background, border-radius e box-shadow.