Gerador de neumorfismo
Superfícies soft UI a partir de uma só cor — sombras clara e escura, quatro formas, profundidade e direção da luz ajustáveis.
Como o gerador de neumorfismo funciona
Gere CSS soft UI a partir de uma única cor de superfície — sombras, gradientes e raio — com prévia ao vivo.
Só uma cor
Escolha a cor da superfície e a ferramenta calcula as duas sombras — um tom mais escuro e outro mais claro —, para o elemento parecer extrudado do fundo em que está.
Quatro formas
A plana fica nivelada com a superfície, a convexa se projeta para fora, a côncava afunda (as duas com um gradiente sutil) e a pressionada usa sombras internas para um efeito rebaixado.
Direção da luz
Escolha de qual canto vem a luz — as sombras clara e escura trocam de lado de acordo, combinando com o resto da sua interface.
Controle de profundidade
Distância, intensidade e desfoque controlam o quanto o elemento parece se elevar. O desfoque acompanha a distância automaticamente, em uma proporção natural, e você pode ajustá-lo depois.
Perguntas frequentes
Um estilo soft UI em que os elementos têm a mesma cor do fundo e parecem extrudados ou pressionados apenas por um par de sombras, uma clara e uma escura — sem bordas nem preenchimentos contrastantes.
A ilusão funciona porque o elemento e a página compartilham a mesma superfície. Se as cores forem diferentes, ele parece um card comum com sombra, e não uma forma extrudada.
O baixo contraste é a principal crítica. Use-o em superfícies decorativas e em controles grandes, mantenha o contraste do texto dentro da WCAG e adicione estados de foco bem visíveis — não dependa só das sombras para indicar que algo é clicável.
Elas adicionam um gradiente diagonal sutil por cima das mesmas sombras: a convexa vai do claro ao escuro (saliente) e a côncava, do escuro ao claro (rebaixada). Já a pressionada leva as sombras para dentro com inset.