Propriedade Box Shadow
Última atualização: 2026-09-13
box-shadow Propriedade Box Shadow
A propriedade box-shadow adiciona uma ou mais camadas de sombra ao redor ou dentro da caixa de borda de um elemento, conferindo profundidade e hierarquia ao elemento na página. É uma propriedade central para efeitos modernos de UI, como cards flutuantes e botões pressionados, e oferece suporte a deslocamento, raio de desfoque, raio de propagação e cor.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | shadow |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
box-shadow: none | <shadow>#;
/* <shadow> = inset? && <length>{2,4} && <color>? */⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | Palavra-chave | Sem sombra de caixa |
<shadow># | Tipo | Uma lista de sombras: inset? horizontal vertical desfoque propagação cor |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| box-shadow | ✓ v10 | ✓ v12 | ✓ v3.5 | ✓ v5.1 | ✓ v10.5 |
| Suportado em todos os principais navegadores | |||||
Dica： Os dois primeiros valores de comprimento (deslocamento horizontal e vertical) são obrigatórios. O raio de desfoque e o raio de propagação têm como padrão 0, e a cor assume por padrão a cor do texto atual do elemento.
Dica： A palavra-chave inset desenha a sombra dentro do elemento, sendo comumente usada para estados pressionados ou recuados.
❓ Perguntas Frequentes
QQual é a diferença entre box-shadow e text-shadow no CSS?
AO box-shadow aplica-se a todo o modelo de caixa: a sombra segue o contorno da caixa de borda do elemento (incluindo border-radius), produzindo uma sombra projetada retangular ou arredondada. O text-shadow aplica-se apenas ao próprio texto, projetando uma sombra ao longo das letras. A sintaxe é semelhante — deslocamento, desfoque e cor —, mas o objeto afetado e a forma como se sobrepõem são completamente diferentes.
QComo escrevo múltiplas camadas de box-shadow em um único elemento?
ASepare múltiplos conjuntos de sombra com vírgulas; o primeiro conjunto é renderizado no topo. Por exemplo, box-shadow: 0 2px 4px #000, 0 8px 16px #333; desenha a primeira camada e então empilha a segunda por cima. Múltiplas sombras são frequentemente usadas para simular o decaimento de uma sombra real ou para combinar efeitos de brilho e contorno — quanto mais camadas, mais próximo da iluminação real.
QO box-shadow pode ser animado e por que a animação do box-shadow apresenta gagueira?
AO box-shadow oferece suporte a transições e animações, mas animá-lo dispara um repaint e pode apresentar gagueira em dispositivos de baixo desempenho. Para otimizar: alterne apenas o valor da sombra no hover em vez de animar o elemento inteiro; use um pseudo-elemento carregando a sombra e faça um fade com transition: opacity; ou, em casos críticos, use filter: drop-shadow(). Sempre teste nos dispositivos de destino.
QComo crio um box-shadow com inset para um efeito recuado ou pressionado?
AColoque a palavra-chave inset bem no início do valor da sombra e a sombra será projetada dentro do elemento — por exemplo, box-shadow: inset 0 2px 8px rgba(0,0,0,0.3). Sombras inset são tipicamente usadas para botões pressionados e campos de entrada recuados. Várias sombras inset podem ser separadas por vírgulas e combinadas em uma aparência 3D indentada.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
