Propriedade CSS box-shadow
O box-shadow é uma propriedade CSS que permite adicionar uma ou mais sombras a elementos. Veja e experimente exemplos aqui.
A propriedade box-shadow permite adicionar uma ou mais sombras ao redor de um elemento, especificando valores para deslocamento horizontal, deslocamento vertical, raio de desfoque, raio de espalhamento, cor e a palavra-chave inset. Esta página explica cada um desses valores e mostra como combiná-los para criar múltiplas sombras, sombras internas (inset), sombras em uma única borda e padrões comuns de interface como cartões elevados.
A propriedade box-shadow é uma das propriedades CSS3.
Você pode adicionar efeitos separados por vírgulas. Se você especificar um border-radius no elemento com sombra, a sombra assumirá os mesmos cantos arredondados.
Esses são dois valores que definem o deslocamento da sombra. H-offset especifica a distância horizontal. Valores positivos posicionam a sombra à direita do elemento. Valores negativos a posicionam à esquerda. V-offset especifica a distância vertical. Um valor positivo posiciona a sombra abaixo do elemento, enquanto um valor negativo a posiciona acima. Se ambos os valores forem 0, a sombra aparece diretamente atrás do elemento.
O terceiro valor é o raio de desfoque. É opcional. Quanto maior o número, maior e mais suave o desfoque. Valores negativos são inválidos. Se omitido ou definido como 0, a borda da sombra é nítida.
O quarto valor é o raio de espalhamento. É opcional. Valores positivos fazem a sombra se expandir, e valores negativos fazem ela encolher. Se omitido ou definido como 0, a sombra tem o mesmo tamanho que o elemento.
O quinto valor é a cor. É opcional. Se omitido, a sombra assume como padrão a cor de texto computada do elemento.
O sexto valor é a palavra-chave inset. É opcional e pode ser colocada em qualquer posição na definição da sombra. Quando presente, cria uma sombra interna em vez de uma sombra projetada.
Um detalhe sutil, mas importante: a cor da sombra quase sempre é definida com um valor semitransparente como rgba(0, 0, 0, 0.2) em vez de uma cor sólida. Um preto semitransparente se mistura com o que quer que esteja atrás do elemento, tornando a sombra natural em qualquer fundo. Cores sólidas como black ou gray tendem a parecer rígidas.
| Valor Inicial | none |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter. |
| Herdado | Não. |
| Animável | Sim. A sombra da caixa é animável. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.boxShadow = "15px 25px 35px gray"; |
Sintaxe
Sintaxe da Propriedade CSS box-shadow
box-shadow: none | h-offset v-offset blur-radius spread-radius color inset;Vamos tentar adicionar sombras a um elemento.
Exemplo da propriedade box-shadow:
Exemplo da Propriedade CSS box-shadow
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 50px;
background-color: #eee;
box-shadow: 5px 4px 10px #1c87c9;
}
</style>
</head>
<body>
<h2>Box-shadow example</h2>
<div></div>
</body>
</html>Resultado
Múltiplas sombras
Você tem a possibilidade de separar o box-shadow por vírgulas várias vezes. Por exemplo, o código abaixo exibirá 3 sombras com múltiplas cores e posições no mesmo elemento.
Exemplo de uso da propriedade box-shadow para adicionar múltiplas sombras ao elemento:
Exemplo da Propriedade CSS box-shadow com múltiplos valores
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 50%;
height: 100px;
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px #1c87c9, 10px 10px #ccc, 15px 15px #8ebf42;
}
</style>
</head>
<body>
<h2>Multiple shadows with box-shadow.</h2>
<div></div>
</body>
</html>Resultado
Agora vamos dar ao elemento um valor inset. Ele adiciona sombra dentro da caixa.
Exemplo da propriedade box-shadow com o valor "inset":
Exemplo da Propriedade CSS box-shadow com valor inset
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 50px;
background-color: #eee;
box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
}
</style>
</head>
<body>
<h2>Box-shadow with inset value</h2>
<div></div>
</body>
</html>Resultado
Sombra em uma única borda
Para criar uma sombra que apareça apenas em um lado da caixa, use um valor negativo de raio de espalhamento.
Propriedade CSS box-shadow
.shadow {
box-shadow: 0 10px 8px -4px yellow;
}Exemplo da propriedade box-shadow com valor negativo de raio de espalhamento:
Exemplo da propriedade box-shadow
<!DOCTYPE html>
<html>
<head>
<style>
.shadow {
width: 100px;
height: 100px;
box-shadow: 0 10px 8px -4px yellow;
background-color: #cccccc;
}
</style>
</head>
<body>
<div class="shadow"></div>
</body>
</html>Casos de uso comuns
O uso mais frequente do box-shadow é elevar um elemento da página para que ele seja lido como uma superfície separada — cartões, menus suspensos, modais e botões todos dependem disso. Uma sombra suave e semitransparente com um pequeno deslocamento vertical transmite uma elevação sutil:
<!DOCTYPE html>
<html>
<head>
<style>
.card {
width: 220px;
padding: 20px;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.2s ease;
}
.card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
</style>
</head>
<body>
<div class="card">Hover me to raise the card.</div>
</body>
</html>Como o box-shadow é animável, combiná-lo com uma transition faz o elemento parecer se elevar ao passar o mouse, como mostrado acima. Empilhar várias sombras em camadas em um único valor separado por vírgulas produz uma profundidade mais suave e realista do que uma única sombra pesada:
.card {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.07),
0 2px 4px rgba(0, 0, 0, 0.07),
0 4px 8px rgba(0, 0, 0, 0.07);
}Alguns pontos importantes a ter em mente:
- Sombras não afetam o layout. Um
box-shadowé pintado fora do modelo de caixa, portanto nunca empurra elementos vizinhos nem adiciona à largura e altura do elemento. Use margin se precisar reservar espaço para ele. - Cantos arredondados são respeitados. Quando o elemento tem um border-radius, a sombra segue a mesma curva automaticamente.
- Desempenho. Raios de desfoque muito grandes e muitas sombras empilhadas são caros para repintar, especialmente durante animações. Mantenha os valores de desfoque modestos e evite animar sombras pesadas em elementos grandes.
Valores
| Valor | Descrição | Experimente |
|---|---|---|
| none | Nenhuma sombra é aplicada. | Experimente » |
| h-offset | Obrigatório. O deslocamento horizontal da sombra. Um valor positivo posiciona a sombra à direita da caixa, um valor negativo posiciona a sombra à esquerda da caixa. | Experimente » |
| v-offset | Obrigatório. O deslocamento vertical da sombra. Um valor positivo posiciona a sombra abaixo da caixa, um valor negativo posiciona a sombra acima da caixa. | Experimente » |
| blur-radius | Opcional. A sombra é desfocada. Quanto maior o número, mais desfocada ficará a sombra. Valores negativos são inválidos. | Experimente » |
| spread-radius | Opcional. A sombra é espalhada. Um valor positivo aumenta o tamanho da sombra, um valor negativo diminui o tamanho da sombra. | Experimente » |
| color | Opcional. A cor da sombra. Se omitida, assume como padrão a cor de texto do elemento. | Experimente » |
| inset | Opcional. Uma palavra-chave opcional que pode ser colocada em qualquer posição na definição da sombra. Transforma uma sombra externa em uma sombra interna. | Experimente » |
| initial | Define a propriedade para seu valor padrão. | Experimente » |
| inherit | Herda a propriedade de seu elemento pai. |