Box-shadow CSS: cinco valores, cada um controlando um aspecto físico diferente
A propriedade box-shadow aceita até cinco valores
posicionais antes da cor — deslocamento horizontal, deslocamento
vertical, desfoque (blur), espalhamento (spread) e, opcionalmente, a
palavra-chave inset — cada um controlando um aspecto
fisicamente distinto de como uma sombra se comportaria no mundo real.
Deslocamento horizontal e vertical posicionam a sombra em relação ao
elemento (simulando a direção de onde viria a luz); desfoque controla
o quão gradual é a transição das bordas da sombra (uma luz mais difusa
produz sombra mais desfocada); espalhamento expande ou contrai o
tamanho da sombra além do tamanho do próprio elemento — um valor
negativo de espalhamento, por exemplo, faz a sombra ficar menor que o
elemento, útil para sombras mais sutis e concentradas.
O que muda com a palavra-chave inset
Sem inset, a sombra é projetada para fora
do elemento, como se ele estivesse elevado da superfície de fundo —
o efeito mais comum, usado para dar profundidade a cards e botões. Com
inset, a sombra é projetada para dentro
do elemento, simulando o oposto: o elemento parece afundado ou
recuado na superfície, um efeito usado com frequência em campos de
formulário pressionados/ativos, ou em designs que buscam simular
profundidade "para dentro" em vez de elevação — a mesma propriedade
CSS, um único valor de palavra-chave, produzindo um efeito visual
conceitualmente oposto.
Múltiplas sombras no mesmo elemento
box-shadow aceita uma lista de definições de sombra
separadas por vírgula, todas aplicadas simultaneamente ao mesmo
elemento — uma técnica usada para simular sombras mais realistas e
em camadas (uma sombra mais próxima e nítida combinada com outra mais
distante e difusa, imitando como sombras reais têm múltiplas fontes de
luz ambiente contribuindo simultaneamente), ou para criar efeitos de
contorno/glow combinando uma sombra colorida sem desfoque com outra
desfocada da mesma cor.