Criando profundidade com box-shadow
A propriedade CSS box-shadow simula elevação e iluminação projetando deslocamentos suaves atrás dos elementos. Um gerador ajuda a ajustar blur, spread e cor antes de colar o código final.
Partes de uma sombra
Toda sombra é descrita pelos deslocamentos horizontal e vertical, raio de desfoque, raio de expansão e cor.
O modo inset opcional inverte a sombra para criar efeitos de baixo relevo.
Por que usar uma ferramenta visual
Ajustar valores diretamente no CSS exige recarregar a página ou inspecionar elementos repetidamente.
Controles interativos oferecem retorno imediato, permitindo que design e engenharia alinhem a mesma escala de profundidade.
A evolução da profundidade nas interfaces
Interfaces skeuomórficas usavam sombras fortes para imitar materiais reais. Sistemas modernos como Material Design formalizaram tokens de elevação com sombras sutis em camadas.
Entender essa história ajuda a equilibrar realismo com desempenho e acessibilidade.
Onde aplicar sombras customizadas
- Cards flutuantes, diálogos e tooltips que precisam de hierarquia
- Controles interativos como botões ou chips para sinalizar foco
- Spotlights de onboarding ou tutoriais guiados
- Ilustrações com identidade de marca que reaproveitam CSS em vez de bitmaps
Boas práticas para profundidade realista
- Reduza a opacidade conforme o blur aumenta para simular luz real
- Empilhe múltiplas sombras para separar luz ambiente da sombra principal
- Documente tokens de elevação junto de espaçamento e tipografia
- Lembre do desempenho: blur pesado em elementos grandes custa GPU