Gerador de Neumorfismo
Faça botões e cartões que pareçam pressionados para fora ou para dentro da página.
- Seus dados nunca saem do seu dispositivo
- 100% grátis
- Sem cadastro
- Funciona offline após a primeira carga
Como fazer um efeito de neumorfismo
- Escolha uma cor base e uma forma.
- Escolha de onde vem a luz e ajuste distância, intensidade e desfoque.
- Copie o CSS (e defina a mesma cor no fundo pai).
Sobre: Gerador de neumorfismo
Crie CSS soft-UI (neumorfismo).
Tudo funciona no seu navegador, por isso é instantâneo e privado. Suas cores e configurações recentes são lembradas neste dispositivo, e a barra de endereço mantém sua cor para que você possa compartilhá-la ou marcá-la.
Ideal para
- Botões e botões de interface de usuário macios
- Cartões de dashboard e widgets
- Leitores de música e UIs inteligentes
Dica: Definir o fundo pai com a mesma cor — É isso que faz a forma parecer extrudida.
Perguntas frequentes
Como é feito o neumorfismo?
Duas sombras em um elemento da mesma cor que seu fundo: uma mais escura longe da luz e uma mais clara em direção a ele. Pressionado usa sombras embutidas; côncavo e convexo adicionam um gradiente sutil.
O neumorfismo é acessível?
Seu baixo contraste pode dificultar a visualização de botões. Use-o para decoração e adicione texto claro, ícones ou bordas para controles importantes.
Que cores funcionam melhor?
Luz média, cores de baixa saturação — As bases muito escuras ou muito brilhantes deixam pouco espaço para as sombras claras e escuras.
Por que parece plano no meu site?
O efeito precisa do elemento para sentar em um fundo da mesma cor. Em um fundo diferente, as sombras claras e escuras não se misturam.
Posso usá-lo em botões e entradas?
Sim, o CSS é apenas um fundo e uma sombra de caixa, então funciona em botões, cartões e campos de formulário.