Gerador de Neumorphism CSS
Projetar elementos de UI suaves com sombras neumórficas, formas e suporte a modo claro/escuro
Sobre Gerador de Neumorphism CSS
Projete elementos de interface soft UI com sombras neumórficas — estados plano, côncavo, convexo e pressionado com suporte a modo claro/escuro, tudo no seu navegador.
Como usar Gerador de Neumorphism CSS
- 1Escolha um tipo de forma: Plano, Côncavo, Convexo ou Pressionado.
- 2Alterne entre modos de cor Claro e Escuro.
- 3Ajuste distância, intensidade, desfoque e raio de borda para o efeito neumórfico.
- 4Defina o tamanho do elemento e a cor de fundo.
- 5Pré-visualize o resultado e copie a saída CSS.
Dicas
- Neumorphism funciona melhor com cores suaves e dessaturadas — evite branco puro ou cores brilhantes.
- Use o estado Pressionado para botões ativos e o estado Convexo para botões padrão.
- Designs neumórficos podem prejudicar a acessibilidade — sempre garanta contraste suficiente para texto em elementos neumórficos.
Limites grátis vs pago
Grátis: formas básicas. Starter+: formas premium.
Ferramentas relacionadas
Equipe OneKitToolsAtualizado 2.21.4