Como funciona a propriedade box-shadow
Cinco valores numa ordem fixa
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25); significa deslocamento X, deslocamento Y, desfoque, expansão e cor. A ordem não pode mudar: o navegador lê os números pela posição, não pelo significado. Os dois primeiros são obrigatórios, os restantes não.
Deslocamento
Um X positivo move a sombra para a direita, um Y positivo move-a para baixo. Uma sombra para baixo parece natural porque, numa cena habitual, a luz vem de cima. Deslocamento zero com desfoque dá um brilho uniforme à volta do elemento.
O desfoque divide-se ao meio
É aqui que mais se erra. Um desfoque de 12 píxeis não significa que a sombra vai 12 píxeis mais longe: metade do desfoque fica dentro da aresta da sombra, metade fora. Assim, o alcance real para lá da aresta é o deslocamento mais seis, mais a expansão.
Expansão
Aumenta a sombra em todos os lados antes de se aplicar o desfoque. Um valor negativo encolhe-a – é assim que se faz uma sombra estreita e densa por baixo de um cartão.
Cor e opacidade
Quase sempre é preto com pouca opacidade, e não cinzento. O cinzento fica cinzento em qualquer fundo, enquanto o preto semitransparente ganha a cor do que está por baixo, e por isso parece uma sombra verdadeira.
Sombra interior
A palavra inset antes dos números vira a sombra para dentro: o elemento parece afundado. Uma sombra assim nunca passa da aresta, por isso não tem "alcance para lá da aresta".
Perguntas frequentes sobre sombras CSS
Uma sombra ocupa espaço na página?
Não. Os elementos vizinhos não a veem e não se afastam – a sombra pode sobrepor-se ao que está ao lado. Se precisa de um intervalo, use uma margem, não uma sombra.
Porque é que a minha sombra não se vê?
Três razões habituais: opacidade zero, deslocamento e desfoque a zero (a sombra fica toda atrás do elemento), ou overflow: hidden no elemento pai, que a corta.
Quantas sombras posso sobrepor?
As que quiser – separadas por vírgulas, e a primeira da lista é desenhada mais perto de quem vê. Várias camadas dão uma profundidade mais suave do que uma sombra grande. Esta página cria uma camada; as outras juntam-se com uma vírgula.
box-shadow ou filter: drop-shadow?
box-shadow desenha um retângulo que segue a forma do contorno. drop-shadow segue a forma real – o contorno de um PNG transparente ou de um SVG. Para um cartão arredondado use o primeiro, para um ícone com recortes o segundo.
E uma sombra para texto?
É outra propriedade – text-shadow, e não tem expansão: só deslocamento, desfoque e cor.