A propriedade box-shadow em CSS serve como um mecanismo eficaz para os desenvolvedores introduzirem profundidade e dimensão aos elementos HTML. Ao incorporar sombras nos elementos, pode-se aumentar o realismo e a atratividade visual da interface do usuário. Este artigo irá se aprofundar nos fundamentos do box-shadow e oferecer exemplos para ajudá-lo a dominar sua aplicação.

Compreendendo o básico

A propriedade box-shadow consiste em vários valores que definem como a sombra aparecerá. Aqui está a sintaxe básica:

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

• offset-x: Este parâmetro define o deslocamento horizontal da sombra. Valores positivos deslocam a sombra para a direita, valores negativos deslocam-na para a esquerda.
• offset-y: Este parâmetro indica o deslocamento vertical da sombra. Valores positivos movem a sombra para baixo, valores negativos a elevam.
• blur-radius (opcional): Esta configuração regula a suavidade da sombra. Um valor mais alto resulta em uma sombra mais difusa. Se este parâmetro não for especificado, o valor padrão será 0, o que produz uma sombra distinta.
• spread-radius (opcional): Este parâmetro afeta as dimensões da sombra. Valores positivos aumentam o tamanho da sombra, valores negativos o reduzem.
• color: Este atributo define a cor da sombra. Pode ser qualquer representação de cores CSS válida, como #000, rgba(0,0,0,0.5) ou hsl(0, 0%, 50%).

Exemplo: Sombra de caixa básica

Vejamos um exemplo simples de box-shadow aplicado a um botão:

button {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

Nesse caso, a sombra é deslocada por 5px horizontalmente e verticalmente, tem um raio de desfoque de 10px, e é colorida com preto com 0,3 de opacidade.

Exemplo: sombras inseridas

box-shadow também suporta a palavra-chave inset, que coloca a sombra dentro do elemento, dando-lhe um efeito recuado.

div {
  box-shadow: inset 0 0 10px #000;
}

Aqui, a sombra é colocada dentro do div, criando um efeito como se o conteúdo fosse empurrado para dentro.

Dicas avançadas

• Você pode criar múltiplas sombras delineando cada especificação de box-shadow com uma vírgula. Esta técnica permite a criação de efeitos de sombra complexos e em camadas.

box-shadow: 2px 2px 5px #aaa, -2px -2px 5px #ccc;

• Efeitos de sombra são frequentemente empregados para produzir interações flutuantes, melhorando a interatividade de botões ou cartões.

button:hover {
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.4);
}

Para quem prefere uma abordagem mais visual, dê uma olhada no Box-Shadow CSS Generator. Esta ferramenta permite que você crie efeitos de sombra de caixa personalizados sem esforço, sem escrever nenhum código e salvar predefinições.