O que esta ferramenta faz
Uma sombra de caixa é a área escura, suave ou dura, que faz um cartão, um botão ou um menu parecerem elevados sobre a página. Em CSS é uma única propriedade, box-shadow, mas ela aceita até seis valores por sombra e quantas sombras você quiser, o que é difícil de imaginar só pelos números. Esta ferramenta deixa você montá-la mudando os números e vendo um cartão reagir, e entrega o CSS para copiar. Você pode empilhar até oito camadas, usar sombras internas, escolher a cor com transparência e colar um box-shadow existente para editá-lo. Tudo roda no seu navegador e nada é enviado.
O que cada número faz
A sintaxe de uma sombra é inset? offset-x offset-y blur spread color. Os dois deslocamentos movem a sombra para a direita e para baixo; negativos movem para a esquerda e para cima. O desfoque suaviza a borda: a especificação pede um desfoque gaussiano com desvio padrão igual à metade do valor, então 30px se dissolve em cerca de 30px. Nunca pode ser negativo. O espalhamento aumenta a sombra em todas as direções antes de desfocar, ou a reduz se for negativo. Espalhamento negativo com deslocamento vertical grande dá o aspecto de "elevada", porque a sombra é menor que o cartão e só aparece embaixo. A sombra segue o border-radius do cartão e nunca muda o layout ao redor.
Camadas: por que várias sombras parecem mais reais
A luz real não faz uma sombra uniforme. Perto do objeto a sombra é pequena e escura; mais longe, larga e fraca. O modelo Em camadas imita isso com cinco sombras, cada uma com o dobro da anterior e todas com 8% de opacidade: 0 1px 1px, 0 2px 2px, 0 4px 4px, 0 8px 8px e 0 16px 16px. A soma é mais suave que uma única sombra com o mesmo desfoque total. No CSS as sombras são separadas por vírgulas e a primeira é desenhada por cima, então a ordem importa quando se sobrepõem.
Sombras ficam melhores num escuro transparente do que num cinza sólido, porque a cor da página aparece por baixo. A opacidade faz parte da cor: rgba(0, 0, 0, 0.15) e o hex #00000026 são a mesma cor, e você escolhe o formato. Num fundo escuro, uma sombra preta quase não aparece; use deslocamento maior, mais opacidade ou um brilho colorido.
drop-shadow() e o que vale saber
filter: drop-shadow() é parente do box-shadow e segue o contorno visível do que foi desenhado, ideal para um PNG com cantos transparentes ou um ícone SVG. Não tem espalhamento nem inset, então a ferramenta oferece essa versão só para camadas que não os usam. As sombras são desenhadas fora da caixa, então um ancestral com overflow: hidden as corta. No modo de cores forçadas (alto contraste), os navegadores removem sombras de caixa, então não dependa só de uma sombra para mostrar o foco. Combine com o gerador de gradientes e confira a cor do texto com as ferramentas de cor.
