Gerador de neumorfismo CSS

O que é Gerador de neumorfismo CSS?

O gerador de neumorfismo CSS é uma ferramenta visual gratuita para criar o visual soft-UI (neumorfismo), em que os elementos parecem sobressair da superfície ou estar afundados nela usando duas sombras deslocadas do mesmo tom. Foi feito para designers de interface e desenvolvedores front-end que querem essa profundidade sutil e tátil sem ajustar à mão pares de box-shadow. Defina uma cor base com o seletor ou um campo hexadecimal, alterne a Forma entre Plana, Côncava e Convexa e ajuste a Distância (o quanto as sombras se deslocam), a Intensidade (a força do contraste claro/escuro), o Desfoque (suavidade) e o Raio (arredondamento dos cantos). A ferramenta deriva da sua cor base um realce mais claro e uma sombra mais escura e os combina – opcionalmente sobrepondo um gradiente sutil nas formas côncava e convexa – em uma única regra CSS, exibida ao vivo sobre um fundo combinando e gerada como código copiável.

Como usar Gerador de neumorfismo CSS

1. Escolha a cor base da superfície com a amostra ou digitando um valor hexadecimal como #e0e5ec.
2. Selecione uma Forma: Plana para um painel elevado, Côncava para uma cavidade afundada ou Convexa para uma saliência abaulada.
3. Defina a Distância para afastar as sombras clara e escura e obter uma extrusão mais profunda.
4. Ajuste a Intensidade para tornar o contraste realce/sombra mais forte ou mais sutil.
5. Ajuste o Desfoque para bordas mais suaves ou nítidas e o Raio para arredondar os cantos.
6. Confira a pré-visualização ao vivo e copie o CSS de neumorfismo gerado para a sua folha de estilos.

Exemplos

cor #e0e5ec, forma Plana, distância 12, intensidade 15, desfoque 24, raio 20

border-radius: 20px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;

cor #e0e5ec, forma Côncava, distância 8, intensidade 15, desfoque 16, raio 16

border-radius: 16px;
background: linear-gradient(145deg, #d0d5db, #e2e7ed);
box-shadow: 8px 8px 16px #bec3c9, -8px -8px 16px #e5e9ef;

cor #3a3f47, forma Convexa, distância 6, intensidade 20, desfoque 12, raio 12

border-radius: 12px;
background: linear-gradient(145deg, #484c54, #363b42);
box-shadow: 6px 6px 12px #2e3239, -6px -6px 12px #61656c;

Perguntas frequentes

O que é neumorfismo?

O neumorfismo (ou soft UI) é um estilo em que os elementos parecem sobressair de uma superfície de cor única ou estar afundados nela, usando duas box-shadow deslocadas do mesmo tom: uma mais clara no canto superior esquerdo e outra mais escura no canto inferior direito. Esta ferramenta deriva ambas as sombras da sua cor base para que sempre combinem com a superfície.

Qual é a diferença entre Plana, Côncava e Convexa?

Plana mantém a superfície em uma cor sólida única, fazendo o elemento parecer elevado acima do fundo. Côncava adiciona um gradiente sutil que escurece em direção ao canto superior esquerdo, parecendo escavado para dentro. Convexa inverte o gradiente para que o centro pareça abaulado e levantado. As sombras clara e escura permanecem iguais; apenas o preenchimento da superfície muda.

Como funcionam Distância, Intensidade, Desfoque e Raio?

A Distância é o deslocamento em pixels de ambas as sombras – valores maiores afastam o elemento da superfície. A Intensidade controla quanto mais claras e escuras as duas cores de sombra são em relação à cor base. O Desfoque suaviza as bordas da sombra e o Raio arredonda os cantos. O CSS se atualiza ao vivo conforme você altera qualquer um deles.

Que cor devo usar para o fundo?

O neumorfismo só se exibe corretamente quando o elemento está sobre uma superfície da mesma cor base – aplique a mesma cor ao elemento pai ou ao fundo da página. A pré-visualização usa sua cor base como plano de fundo para que você possa avaliar o efeito com precisão antes de copiar.

Meus dados são enviados para algum lugar?

Não. O gerador é executado inteiramente no seu navegador com JavaScript – sua cor e suas configurações nunca são enviadas a um servidor, então ele funciona de forma privada e até offline depois que a página é carregada.