Gerador de Neumorphism
Desenhe superfícies de interface neumórficas suaves e extrudidas com sombras duplas e copie o CSS.
—
O fundo da tela coincide com a cor do elemento — é isso que faz funcionar o aspeto suave e extrudido do neumorfismo.
Por predefinição, as sombras clara e escura derivam da cor base. Ative para as definir manualmente.
Sobre Gerador de Neumorphism
O Gerador de Neumorfismo cria o visual suave e extrudado do "soft UI": um elemento que parece pressionado para fora — ou para dentro — da superfície atrás dele. Escolha uma cor base e a ferramenta deriva todo o resto, pois o efeito só funciona quando o elemento e seu fundo compartilham a mesma cor e a profundidade vem inteiramente de duas box-shadows opostas.
Controles deslizantes ajustam a geometria: tamanho, raio da borda, a distância das sombras, sua intensidade e desfoque. Quatro modos de forma — flat, concave, convex e pressed — trocam o gradiente interno e a direção da sombra, e um seletor de fonte de luz move o destaque para qualquer um dos quatro cantos para combinar com a iluminação do seu design.
Por padrão, as cores das sombras clara e escura são calculadas a partir da cor base, mas um modo manual permite defini-las você mesmo. O CSS gerado — background, radius e a box-shadow dupla — está a um clique de distância.
Como usar Gerador de Neumorphism
- Escolha a cor base — ela é aplicada ao elemento e à tela atrás dele.
- Escolha uma forma: flat, concave, convex ou pressed.
- Defina o canto da fonte de luz para controlar onde o destaque cai.
- Ajuste tamanho, raio da borda, distância, intensidade e desfoque com os controles deslizantes.
- Ative as cores de sombra manuais se quiser substituir os tons claro e escuro derivados.
- Copie o CSS e cole-o no seu elemento.