Gerador de Box Shadow
Combine múltiplas camadas de sombra para profundidade realista, inclusive sombras internas.
Propriedades CSS utilizadas
box-shadowSintaxe: offset-x | offset-y | blur | spread | cor. Você pode empilhar várias sombras separadas por vírgula para criar profundidade em camadas — é assim que o neumorphism deste site funciona.
insetQuando presente, a sombra passa a ser projetada para dentro do elemento, criando um efeito de superfície pressionada/afundada.
Perguntas frequentes
Tecnicamente ilimitadas; esta ferramenta permite até 4 camadas, suficiente para a maioria dos efeitos de elevação e neumorphism.
Blur suaviza a borda da sombra; spread aumenta ou diminui o tamanho da sombra antes do desfoque ser aplicado.
Sombras muito grandes ou animadas em excesso podem custar repaint. Prefira poucas camadas e evite animar box-shadow diretamente — anime opacity/transform quando possível.
Ferramentas relacionadas
Gerador de Neumorphism
Superfícies suaves com sombras duplas — o mesmo estilo usado neste site.
Gerador de Cards
Cards com sombra, borda, raio e espaçamento configuráveis para listagens e dashboards.
Gerador de Border Radius
Ajuste os 4 cantos individualmente e veja formas orgânicas em tempo real.