Gerador de Neumorfismo CSS

Gere o neumorfismo soft-UI visualmente — escolha uma cor base, direção e forma da luz e, em seguida, copie o CSS.

How to use Neumorphism Generator

1. Escolha uma cor de fundo base — UI suave funciona melhor com tons leves ou mudos.
2. Defina o tamanho do elemento, o raio- borda, a distância da sombra, o borrão e a intensidade.
3. Escolha a direção da luz e uma forma: plana, côncava, convexa ou pressionada.
4. Clique em Copiar CSS para copiar o conjunto completo de regras borda-rádio, fundo e box-shadow.

O que é {nome}?

FAQ

Porque é que o neumorfismo usa duas sombras?

A interface suave simula uma única fonte de luz, emparelhando uma sombra de destaque de luz no lado iluminado com uma sombra escura no lado oposto, ambas construídas a partir da cor de fundo do elemento. Os dois box-shadows juntos fazem a superfície parecer levantada ou afundada.

O que faz a forma de inserção (pressão)?

Adicionando inset para ambas as sombras move-os dentro do elemento, assim ele parece pressionado para a superfície em vez de levantado acima dele. Esta ferramenta aplica o inset automaticamente para as formas pressionadas e côncavas.

Por que o elemento deve corresponder ao fundo da página?

Neumorfismo só lê como UI suave quando o elemento e seus arredores compartilham a mesma cor base. Se os fundos diferem, o efeito parece uma sombra de gota comum em vez de uma superfície extrudida.

Related tools

• Text Shadow Generator
• CSS Triangle Generator
• Box Shadow Generator
• CSS Gradient Generator