Gerador de Neumorphism
Superfícies suaves com sombras duplas — o mesmo estilo usado neste site.
Propriedades CSS utilizadas
box-shadow duploNeumorphism combina uma sombra escura (fonte de luz oposta) e uma sombra clara (reflexo) na mesma cor do fundo, criando a sensação de relevo sem bordas.
Contraste de acessibilidadePor depender de sombras sutis, esse estilo exige cuidado extra com contraste — sempre reforce estados de foco e não use apenas relevo para indicar interatividade.
Perguntas frequentes
Funciona melhor em fundos de tom médio, nem muito claros nem muito escuros, para que ambas as sombras sejam perceptíveis.
Requer atenção: complemente sempre com contornos de foco visíveis e não dependa só do relevo para comunicar estado, como fizemos neste site.
Troque as cores de sombra clara/escura pelas variações correspondentes do fundo escuro, mantendo a mesma proporção de contraste.
Ferramentas relacionadas
Gerador de Box Shadow
Combine múltiplas camadas de sombra para profundidade realista, inclusive sombras internas.
Gerador de Cards
Cards com sombra, borda, raio e espaçamento configuráveis para listagens e dashboards.
Gerador de Botões CSS
Botões com preenchimento, sombra, borda e cantos arredondados prontos para o seu design system.