Gerador de Neumorfismo CSS
Gere CSS soft-UI (neumórfico) — uma cor de fundo mais um par de box-shadows deslocados, um mais claro e outro mais escuro, em estilo elevado (flat/convex) ou pressionado (concave) — a partir de uma cor base, distância, desfoque e raio de borda.
Entrada
A cor base do elemento e seus arredores.
A distância entre as sombras claras e escuras do elemento.
Saída
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-neumorphism-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"baseColor": "#e0e5ec",
"style": "flat",
"distance": "20",
"blur": "60",
"borderRadius": "50"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-neumorphism-generator` tool (CSS Neumorphism Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-neumorphism-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Neumorfismo CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que faz
O Gerador de Neumorfismo CSS transforma um seletor de cor e três controles deslizantes em um bloco CSS "soft UI" pronto para colar. Neumorfismo (uma mistura de "novo" e "skeuomorphism") é a tendência de design em que elementos de interface parecem ser moldados do mesmo material que o fundo — extrudados da superfície ou pressionados nela — usando apenas uma cor de fundo e um par de sombras deslocadas. Não há truques de gradiente ou ativos de imagem por trás do efeito: a ilusão vem inteiramente do posicionamento de uma sombra que é mais clara do que o fundo (simulando uma fonte de luz) oposta a uma que é mais escura (simulando a sombra que ela projeta).
As propriedades que gera
background: <color or gradient>;
border-radius: Npx;
box-shadow: Dpx Dpx Bpx <darker>, -Dpx -Dpx Bpx <lighter>;- background — sua cor base como está para o estilo Flat, ou um gradiente diagonal suave entre um tom ligeiramente mais claro e ligeiramente mais escuro para Convex (elevado) e Concave (pressionado) — a direção do gradiente se inverte entre os dois, o que faz um parecer saliente e o outro parecer afundado.
- border-radius — cantos arredondados do controle deslizante Raio de Borda. Elementos neumórficos são quase sempre arredondados; cantos aguçados quebram a ilusão de "material moldado".
- box-shadow — duas sombras deslocadas pelo controle deslizante Distância em direções opostas: um tom mais escuro em direção ao canto inferior direito (como se iluminado pelo canto superior esquerdo) e um tom mais claro em direção ao canto superior esquerdo. Ambos compartilham o mesmo raio Desfoque, portanto desaparecem para o fundo nas bordas em vez de mostrar linhas de sombra duras.
Os tons mais claros e mais escuros são derivados de sua cor base empurrando cada canal RGB em direção ao branco ou preto por uma quantidade fixa — a mesma matemática de clareamento/escurecimento que o efeito vem usando desde a popularização original de "Neumorphism in User Interfaces" em 2019/2020.
Como usar
- Escolha uma Cor de Fundo — ela é a base de toda sombra e gradiente no resultado derivado dela, portanto o efeito funciona melhor em uma cor de meio-tom com baixa saturação (a paleta neumórfica clássica é um cinza suave como
#e0e5ec; cores muito escuras ou muito saturadas reduzem o contraste que as sombras precisam). - Escolha um Estilo: Flat para um painel de cor sólida com apenas o par de sombra elevado, Convex para adicionar um gradiente que parece saliência para fora, ou Concave para inverter esse gradiente para que o painel pareça pressionado para dentro.
- Arraste Distância para definir a distância entre as sombras claras/escuras do elemento e Desfoque para controlar o quão suaves são suas bordas — valores de desfoque maiores com distância correspondente dão a aparência "moldada" mais suave.
- Defina Raio de Borda para o quão arredondados são os cantos do painel.
- Copie o CSS gerado e aplique-o a qualquer elemento de nível de bloco com fundo correspondente (ou próximo) à cor escolhida — o neumorfismo é lido corretamente apenas quando os arredores do elemento compartilham sua cor base, pois as sombras são calibradas em relação a ela.
FAQ
Por que meu elemento parece plano em vez de "soft UI"? O fundo pai/página deve corresponder (ou estar muito próximo) à cor escolhida aqui. O neumorfismo depende do elemento se misturar com seus arredores, exceto pelas duas sombras sutis — coloque em uma página branca com uma cor base cinza e a ilusão se quebra.
Por que o neumorfismo é considerado um risco de acessibilidade? Todo o efeito depende de um contraste muito baixo entre o elemento e seu fundo, que é exatamente o que as diretrizes de acessibilidade (como taxas de contraste WCAG) alertam. Use-o para superfícies decorativas e UI de baixo risco, não para texto, botões ou qualquer coisa que um usuário precise distinguir à primeira vista.
Posso obter a aparência verdadeira de "pressionado" com uma sombra inset?
O estilo Concave deste gerador simula uma aparência pressionada invertendo o gradiente de fundo em vez de mudar para sombras inset CSS. Se precisar de uma sombra inset literal, adicione a palavra-chave inset a cada valor box-shadow no CSS gerado.
Esta ferramenta armazena ou carrega minhas escolhas de cor? Não. Tudo é executado localmente no seu navegador — nada que você insira é enviado para um servidor ou salvo.