Gerador CSS de neumorphism
Gere CSS de soft UI (neumorphism): sombras clara e escura derivadas da sua cor base, formas plana, côncava, convexa ou pressionada e quatro direções de luz.
Configurações de neumorfismo
As sombras clara e escura são derivadas da cor base, aumentando e diminuindo a luminosidade OKLCH conforme a intensidade. Use a mesma cor no fundo da página.
Pré-visualização
border-radius: 50px; background: #e0e0e0; box-shadow: 20px 20px 60px #b0b0b0, -20px -20px 60px #ffffff;
Ferramentas Relacionadas
Ver TodasO que é Gerador de neumorphism?
Produz o visual soft UI em que um elemento parece saltar da página (ou estar afundado nela). Ele deriva uma cor de sombra mais clara e outra mais escura da sua cor base e as combina em dois box-shadows opostos, com preenchimentos em gradiente opcionais para superfícies côncavas e convexas.
Como usar Gerador de neumorphism
- Informe a cor base (use a mesma cor no fundo da sua página).
- Escolha a forma: Plana, Côncava, Convexa ou Pressionada.
- Escolha a direção da fonte de luz.
- Ajuste a distância, o desfoque, a intensidade, o raio e o tamanho da prévia.
- Copie o código CSS.
Exemplo
Base #e0e0e0, flat, light from top left, distance 20px, blur 60px, intensity 0.15, radius 50px
border-radius: 50px; background: #e0e0e0; box-shadow: 20px 20px 60px #b0b0b0, -20px -20px 60px #ffffff;
Quando usar Gerador de neumorphism
Use-o em dashboards descontraídos, controles de apps de casa inteligente ou de música e peças de portfólio. O neumorphism tem baixo contraste por natureza, então não dependa só dele para botões ou campos importantes; acrescente rótulos claros, ícones ou um anel de foco para acessibilidade.
Como funciona Gerador de neumorphism
As cores das sombras clara e escura são calculadas em OKLCH, aumentando e diminuindo a luminosidade da cor base pela intensidade e mantendo matiz e croma (com mapeamento de gama para sRGB), então também funciona para bases coloridas e escuras. A sombra escura é deslocada para longe da fonte de luz pela distância e a clara em direção a ela, ambas com o mesmo desfoque. A forma pressionada usa duas sombras inset. As formas côncava e convexa acrescentam um linear-gradient cujo ângulo segue a direção da luz, usando cores um terço da intensidade mais claras e mais escuras.
Casos de Uso Comuns
- Botões de alternância e de pressão suaves
- Cards de dashboard sobre um fundo da mesma cor
- Estado pressionado para controles ativos
- Interfaces de calculadora ou de player de música
- Soft UI em modo escuro usando uma cor base escura
Perguntas Frequentes
Por que o fundo da página precisa ter a mesma cor da base?
A ilusão vem do elemento ter a mesma cor do entorno, com apenas as sombras revelando sua forma. Um fundo diferente quebra o efeito.
Funciona com cores escuras?
Sim. Como a luminosidade é deslocada em OKLCH em vez de multiplicada, uma base escura ainda ganha uma sombra de realce visivelmente mais clara.
Qual a diferença entre côncavo e convexo?
O convexo é mais claro no lado voltado para a luz (parece saltar para fora); o côncavo é mais escuro ali (parece escavado).