English
EspañolGerador de neumorfismo (soft UI) CSS
Escolha a cor de fundo: o elemento usa a mesma cor e as sombras são calculadas a partir dela. Teste os quatro formatos.
Botões e cartões que saltam do fundo
Tudo é feito no seu aparelho: nada é enviado para a internet.
Disponível em: 
Gerador de neumorfismo (soft UI) CSS: para que serve
O neumorfismo, ou soft UI, faz botões e cartões parecerem moldados no próprio fundo, com uma sombra clara de um lado e uma escura do outro.
Escolha a cor e o gerador calcula as duas sombras a partir dela, com tamanho, cantos, distância, desfoque, intensidade e a direção da luz. Há quatro formatos: plano, côncavo e convexo (com um degradê sutil) e pressionado (sombras internas). A página explica o cuidado com o contraste, o ponto fraco desse estilo.
Como usar
- Escolha a cor de fundo.
- Ajuste distância, desfoque, intensidade e luz.
- Escolha o formato e copie o CSS.
Quando usar
- Botões e cartões em painéis.
- Controles de player ou de app.
- Detalhes decorativos em landing pages.
Perguntas frequentes
Como o neumorfismo funciona?
O elemento tem a mesma cor do fundo e duas sombras: uma mais clara para o lado de onde vem a luz e outra mais escura para o lado oposto. Isso dá a impressão de relevo, como se o elemento fosse moldado no próprio fundo.
Neumorfismo é acessível?
Com cuidado. Como o elemento tem a mesma cor do fundo, a borda dele tem pouco contraste e pode sumir para quem enxerga pouco. Use em detalhes decorativos e cartões, garanta contraste no texto e nos ícones e não dependa só do relevo para mostrar que algo é um botão.
Funciona em fundo escuro?
Funciona, mas o efeito fica mais sutil. Em cores muito escuras ou muito claras a sombra do lado extremo quase não aparece; tons médios dão o resultado mais visível.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.