🟢 Dev

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

Tipo

Cor de base Tamanho (px) 200px Border-radius (px) 30px Distância (px) 14px Intensidade (%) 15% Blur (px) 28px

CSS

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.

Perguntas frequentes

Colei o CSS no meu projeto e o relevo sumiu. O que faltou?

Quase sempre é a cor do fundo. O volume do neumorphism vem de duas sombras coloridas a partir da própria superfície, uma mais clara e uma mais escura: se o elemento é #e0e5ec e a página é branca, as sombras batem no branco e o relevo desaparece. Pinte o container com a mesma cor de base do elemento. Nesta página o fundo do preview é forçado para a cor escolhida justamente por isso, o que explica funcionar aqui e não lá.

Por que o tamanho que escolhi não aparece no CSS copiado?

Porque o tamanho existe só no preview. O CSS gerado tem três coisas — background, border-radius e o box-shadow com as duas sombras — e nenhuma dimensão, já que na prática o elemento costuma ser dimensionado pelo conteúdo ou pelo layout em que ele entra. O controle de tamanho serve para você julgar a proporção entre distância, desfoque e área. Se quiser travar o quadrado, acrescente width e height à mão depois de colar.

Qual é a diferença entre Elevado, Plano e Pressionado?

Elevado joga a sombra escura para baixo e à direita e a clara para cima e à esquerda, no valor cheio da distância. Pressionado usa essas mesmas sombras com inset, empurrando o relevo para dentro. Plano é o meio-termo: mantém a direção do elevado com um terço da distância e metade do desfoque, só o bastante para descolar do fundo. A intensidade, de 5% a 40%, controla o quanto as sombras clareiam e escurecem a cor de base — nos 15% padrão são 12 níveis de RGB para cada lado.

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.

🪟

Gerador de Glassmorphism CSS

Crie efeitos de vidro fosco (glassmorphism) com backdrop-filter, transparência e bordas. Ajuste blur, saturação e opacidade. Veja o preview em tempo real e copie o CSS. Tudo no navegador.

🌈

Gerador de Gradiente CSS

Crie gradientes lineares e radiais para CSS com prévia em tempo real. Ajuste cores, posições e ângulo. Copie o código CSS com um clique.

〰️

Gerador Cubic Bezier

Crie e visualize curvas cubic-bezier para animações CSS. Arraste os pontos de controle, veja o preview da animação e copie o valor pronto. Inclui presets (ease, ease-in, ease-out). Tudo no navegador.