- Qual a diferença entre desfoque (blur) e expansão (spread)?
- Desfoque é o quanto a borda da sombra é suave — é o raio ao longo do qual a sombra vai ficando transparente. Expansão é o tamanho da sombra antes de o desfoque começar — expansão positiva deixa a sombra maior que o elemento, negativa deixa menor. O sistema de elevação do Material Design usa expansão negativa com desfoque positivo para criar sombras que parecem vir de uma luz acima e de lado.
- Por que minhas sombras parecem duras?
- Três motivos comuns. (1) A opacidade está alta demais — tente de 0,08 a 0,15 em vez do 0,5 padrão que a maioria dos geradores usa. (2) A cor é preto puro — sombras do mundo real puxam levemente para a cor da superfície embaixo, mas em design de tela baixar a opacidade é a solução mais fácil. (3) Só uma camada — a maioria das sombras bem-acabadas empilha duas: uma justa para o contato com a superfície e uma mais suave para a difusão ambiente.
- O que faz a opção inset?
- O inset leva a sombra para dentro do elemento em vez de fora. As mesmas regras de deslocamento, desfoque, expansão e cor valem, mas a sombra é desenhada dentro da border-box do elemento. Use para campos rebaixados, estados de botão pressionado, o interior de uma pílula em que você quer sugerir profundidade, ou para dar uma textura sutil a um card sem usar imagem de fundo.
- Quantas camadas de sombra posso empilhar?
- O CSS em si não tem limite. Os navegadores desenham o que você mandar, embora cada camada acrescente um pequeno custo de pintura. Para design de interface, 1 a 3 camadas cobrem quase todo nível de elevação. Acima de 4 camadas você normalmente está criando um efeito (neon, neumorfismo) em vez de profundidade — essas coisas têm geradores próprios.
- Por que minhas sombras estão cortadas de um lado?
- Algum elemento pai tem overflow: hidden em algum ponto da árvore. A sombra é desenhada fora da caixa do elemento, então pode ser cortada por qualquer ancestral com restrição de overflow. Culpados comuns: um card dentro de um contêiner com cantos arredondados e overflow: hidden para recortar a imagem; uma coluna flex com min-height e overflow definido. Resolva acrescentando padding no pai para a sombra ter onde aparecer, ou passando a sombra para o pai.
- O box-shadow afeta o tamanho ou o layout do elemento?
- Não. O box-shadow é puramente visual — ele é desenhado fora da caixa, mas não soma à largura ou altura do elemento nem afeta a posição dos irmãos. Isso é diferente do border, que soma ao tamanho do box model, a menos que box-sizing: border-box esteja definido. Se uma sombra está sobrepondo um elemento vizinho e você quer espaço, acrescente margin ao elemento.
- Qual o custo de desempenho de um box-shadow complexo?
- Em hardware moderno, desprezível para elementos estáticos — o navegador compõe a sombra na mesma camada do elemento. Onde importa: animar o próprio box-shadow (mudar desfoque ou expansão no hover) força uma repintura a cada quadro e pode engasgar em aparelhos lentos. O truque que designers usam: animar a opacidade de um pseudo-elemento empilhado que tem a sombra maior, em vez de animar os valores da sombra. O resultado parece igual e roda a 60fps.
- Posso usar esta sombra no Tailwind, no Bootstrap ou no styled-components?
- Pode. O resultado é CSS puro — copie o valor do box-shadow e cole em qualquer sistema que aceite uma regra CSS. No Tailwind, coloque o valor numa classe de valor arbitrário shadow-, como shadow-[0_4px_6px_-1px_rgb(0_0_0_/_0.1)]. No styled-components, cole dentro de uma template literal. No Bootstrap, sobrescreva .shadow com o valor gerado no seu CSS personalizado.
- A mesma sombra fica igual em todo navegador?
- Quase. O box-shadow está estável no Chrome, Firefox, Safari e Edge há mais de uma década — o desenho bate com diferença de um pixel em deslocamentos comuns. O único ponto de atenção: valores muito grandes de expansão combinados com desfoque muito grande podem aparecer um pouco diferentes em versões antigas do Safari. Fique com expansão abaixo de 20px e desfoque abaixo de 50px para resultados mais consistentes entre navegadores.
