Gerador de neomorfismo CSS
Crie superfícies de interface suaves e relevadas.
O neomorfismo usa sombras clara e escura pareadas sobre um fundo correspondente para dar aos elementos um relevo suave. Defina o fundo, a distância, a intensidade e o raio e copie o CSS.
Cor da superfície
20px
60%
16px
background: #e0e5ec; border-radius: 16px; box-shadow: 20px 20px 30px rgba(174, 181, 195, 0.60), -20px -20px 30px rgba(255, 255, 255, 0.60);
Como construir neomorfismo
- Escolha uma cor de fundo; cinzas pastéis suaves funcionam melhor.
- Escolha o modo claro ou escuro.
- Ajuste distância, intensidade e raio com os controles.
- Copie o CSS e use em elementos com a mesma cor de fundo.
Perguntas frequentes
Por que o elemento deve compartilhar a cor de fundo?
A ilusão depende das duas sombras se misturarem à mesma cor de superfície, então o elemento e seu contêiner devem coincidir.
Qual é a diferença entre modo claro e escuro?
O modo escuro usa sombras brancas e negras subtis sobre um fundo escuro, em vez do clássico cinza claro.
O neomorfismo é acessível?
Use-o com contraste suficiente para o texto e nunca dependa apenas da sombra para indicar interatividade.