Gerador de Neumorphism CSS
Crie efeitos Soft UI (neumorphism) com dois box-shadows complementares. Ajuste cor de base, distância, blur e tipo (extrudido, plano, pressionado). Cópia em CSS pronto. Tudo no navegador.
Preview
Soft UI / Neumorphism
Neumorphism (também chamado Soft UI) cria a ilusão de elementos extrudidos da superfície usando duas sombras opostas: uma clara no topo-esquerda e uma escura no embaixo-direita. Pressionado é o inverso, com sombras inset.
Importante: a cor do fundo da página precisa ser igual à cor base do elemento — sem isso, o efeito não funciona. Por isso esta página força o fundo do preview com a cor escolhida.
Acessibilidade: o contraste em neumorphism é baixo por design. Use textos com contraste maior ou complemente com cor sólida em ações importantes. Tudo no navegador.
Crie o efeito Soft UI (neumorphism)
O neumorphism, também chamado de Soft UI, é aquele estilo em que os elementos parecem esculpidos na própria superfície, com um relevo suave que sai ou afunda no fundo. O truque está em combinar duas sombras complementares, uma clara e uma escura. É exatamente isso que o gerador monta para você, de forma visual.
Escolha a cor de base e ajuste a distância, o desfoque e o tipo de relevo (extrudido, plano ou pressionado), acompanhando o resultado em tempo real. Quando gostar, copie o CSS pronto, já com os dois box-shadows calculados para o efeito ficar coerente.
Não precisa instalar nada, já que tudo acontece no navegador. Assim dá pra experimentar esse estilo de interface sem ficar adivinhando valores de sombra no escuro.
Ferramentas Relacionadas
Gerador de Sombra CSS
Crie sombras CSS (box-shadow) com prévia em tempo real. Configure múltiplas camadas de sombra, cor, desfoque, expansão e inset. Copie o código CSS.
Gerador de Mesh Gradient
Crie mesh gradients modernos combinando vários radial-gradients. Adicione, remova e arraste pontos para compor fundos vibrantes ao estilo Stripe e Linear. Tudo no navegador.
Gerador de Botão CSS
Crie botões CSS customizados: cor, texto, padding, border-radius, sombra e hover. Veja o preview em tempo real e copie o HTML+CSS pronto para colar no projeto. Tudo no navegador.