Podemos usar sombras de caixa para criar um efeito visual em que um elemento parece flutuar acima do fundo. Esse efeito pode criar profundidade, destacar elementos específicos e adicionar interesse visual a uma página web. Para isso, podemos aplicar a propriedade box-shadow.

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color;

• offset-x refere-se ao posicionamento horizontal da sombra, com um valor positivo deslocando a sombra para a direita do elemento e um valor negativo deslocando para a esquerda;
• offset-y refere-se ao posicionamento vertical da sombra, com um valor positivo deslocando a sombra para baixo e um valor negativo deslocando para cima;
• blur-radius define o grau de desfoque da sombra e é um valor opcional, sendo que um valor maior produz uma sombra mais desfocada;
• spread-radius também é opcional, aumenta ou diminui o tamanho da sombra com base em seu valor positivo ou negativo;
• color especifica a cor da sombra usando qualquer formato de cor válido, e também é um valor opcional.

Nota

Para encontrar a sombra mais adequada, visite a fonte gerador de sombras.

Além de box-shadow, as propriedades text-shadow e drop-shadow permitem criar sombras para textos e outros elementos, respectivamente. Elas funcionam da mesma forma que a propriedade box-shadow. No entanto, essas propriedades são usadas com menos frequência em comparação com box-shadow..