Neumorfismo (ou UI suave) tem sido uma grande tendência em web design. Ele cria uma bela aparência de plástico extrudado que parece altamente premium e moderno.
No entanto, codificar botões neumórficos do zero é uma grande dor de cabeça.
A matemática por trás das sombras
Um botão Neumórfico perfeito requer duas sombras de caixa perfeitamente equilibradas: 1. Uma sombra clara no canto superior esquerdo para simular uma fonte de luz. 2. Uma sombra escura no canto inferior direito para simular a profundidade.
Se o contraste for muito alto, parece difícil. Se estiver muito baixo, o botão desaparece no fundo.
```css / A fórmula clássica do Neumorfismo / plano de fundo: #e0e5ec; sombra da caixa: 9px 9px 16px rgb (163.177.198.0,6), -9px -9px 16px rgba(255.255.255, 0,5); ```
A maneira mais rápida
Em vez de ajustar os valores CSS por horas no DevTools, você pode usar nosso [CSS Button Generator](/en/css-button-generator).
Nossa ferramenta permite que você ajuste visualmente o raio exato da borda, a cor e a intensidade da sombra desejada. Quando parecer perfeito na tela, basta clicar em "Copiar CSS" e soltá-lo em seu componente React ou folha de estilo.
Pare de escrever sombras CSS brutas e comece a gerá-las visualmente!