Gerador de Box Shadow CSS

A propriedade box-shadow segue uma ordem fixa de valores: deslocamento horizontal, deslocamento vertical, desfoque, espalhamento e cor. Os dois deslocamentos movem a sombra em relação ao elemento, em pixels, e valores positivos a jogam para a direita e para baixo. O desfoque (blur) define quão suave é a borda: 0 deixa a sombra dura, valores altos a espalham. O espalhamento cresce ou encolhe a sombra, e a cor costuma vir em rgba para incluir transparência. A palavra inset no início, quando presente, inverte tudo para dentro do elemento. Essa mesma ordem vale para qualquer sombra que você escreva no CSS.

Você pode aplicar mais de uma sombra ao mesmo elemento separando cada conjunto de valores por vírgula na propriedade box-shadow. As sombras são desenhadas na ordem em que aparecem, com a primeira por cima, o que permite efeitos que uma sombra só não faz. Um uso comum é combinar duas ou três sombras com deslocamentos e desfoques crescentes e opacidades baixas, criando uma profundidade mais realista, próxima de como a luz se comporta. Outro é somar uma sombra externa e uma inset no mesmo elemento. Cada camada extra pesa pouco, mas muitas sombras desfocadas podem afetar o desempenho em telas grandes.

O box-shadow não é a única forma de criar sombra no CSS, e conhecer as vizinhas evita usar a errada. O box-shadow segue sempre o retângulo do elemento, respeitando o border-radius, então é ideal para cartões e botões. Já o filtro drop-shadow, usado em filter, acompanha o formato real do conteúdo, incluindo as bordas transparentes de um PNG ou de um SVG, sendo melhor para ícones e imagens recortadas. Uma diferença prática importante: o box-shadow não ocupa espaço no layout nem empurra outros elementos, ao contrário do border, que soma à largura e à altura da caixa.