Podemos utilizar sombras de caixa para criar um efeito visual onde um elemento parece flutuar acima do plano de fundo. Esse efeito pode criar profundidade, destacar elementos específicos e adicionar interesse visual a uma página da web. Para alcançá-lo, podemos aplicar a propriedade box-shadow.

• 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-a 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-a para cima.
• raio-de-desfoque estabelece o grau de desfoque para a sombra e é um valor opcional, com um valor mais alto produzindo uma sombra mais desfocada.
• raio-de-expansão também é opcional; aumenta ou diminui o tamanho da sombra com base em seu valor positivo ou negativo.
• cor 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 o gerador de sombra fonte shadow generator.

Além de box-shadow, as propriedades text-shadow e drop-shadow nos permitem criar sombras para texto e outros elementos, respectivamente. Elas funcionam da mesma maneira que a propriedade box-shadow. Contudo, essas propriedades são usadas raramente em comparação com box-shadow.