Artigo completo
As sombras são um dos truques mais eficazes para criar profundidade e hierarquia em interfaces planas. Uma sombra bem calibrada é o que distingue um cartão amador de um design profissional — e o CSS oferece um controlo praticamente ilimitado através da propriedade box-shadow.
A propriedade aceita cinco valores principais: deslocamento horizontal (X), deslocamento vertical (Y), desfoque (blur), extensão (spread) e cor. Opcionalmente pode ainda preceder-se com a palavra-chave inset, transformando a sombra numa iluminação interior. Combinando estes valores é possível simular papel, vidro, metal, elevação Material Design ou efeitos neomórficos.
A regra de ouro para sombras naturais é imaginar uma fonte de luz consistente — normalmente a partir de cima. Deslocamentos horizontais devem ser mínimos ou nulos, o vertical positivo (a sombra cai para baixo), o blur significativamente maior que o offset (para simular a difusão da luz) e a opacidade da cor bastante baixa, entre 5 e 20 por cento em fundos claros.
Sistemas de design como o Material Design definem escalas de elevação com múltiplas sombras sobrepostas para maior realismo. A técnica consiste em combinar duas ou três sombras: uma mais próxima e nítida para definir a base e outras mais difusas e afastadas para simular a luz ambiente. Basta separá-las por vírgula: box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06).
O inset é útil para simular campos de formulário rebaixados, botões pressionados ou zonas cavadas. Uma pequena sombra interior no topo dá a ilusão de que o elemento está afundado no plano circundante, uma técnica popular no estilo neumorphism.
Do ponto de vista de desempenho, box-shadow é acelerado pelo GPU em todos os navegadores modernos, mas sombras com blur muito elevado em muitos elementos simultâneos podem impactar dispositivos móveis mais fracos. Se notar quebras de fluidez em scroll, considere aplicar as sombras apenas quando o elemento entra no viewport ou substitua-as por filtros drop-shadow em casos específicos.
Este gerador simplifica todo o processo de tentativa e erro. Ajuste cada parâmetro com um cursor, veja o resultado numa caixa de referência e copie o CSS pronto. Combine com o Gerador de Gradientes CSS para completar todos os efeitos visuais do seu design system.