Blocos planos, botões sem profundidade, cartões que se confundem com o fundo: este é o aspeto típico de um site onde o designer foi poupado no box-shadow. No entanto, um par de linhas de CSS pode transformar marcação sem graça numa interface com personalidade, adicionando espaço branco, destacando um bloco chave ou separando suavemente uma secção sem um único border.

O problema é que a maioria dos programadores fica pela sombra cinzenta padrão 0px 2px 5px rgba(0,0,0,0.2) e esquece-se de que o box-shadow pode fazer muito mais: sombras com várias camadas, brilhos coloridos, neumorfismo, efeitos inset e até renderização de pixel art sem um único div.

Abaixo estão 13 técnicas que transformarão o box-shadow de uma ferramenta aborrecida na sua principal ferramenta para trabalhar com profundidade. Cada trecho de código é copiado de projetos reais e está pronto a usar.

💡 Visão geral rápida:

• Decomposição da sintaxe do box-shadow para se lembrar dela à primeira
• 13 trechos prontos a usar: de um contorno quase invisível a um brilho colorido com várias camadas
• Três formas de incluir CSS em HTML e quando usar cada uma
• Perguntas frequentes: desempenho, filter: drop-shadow, inspetor do Chrome e neumorfismo

O que é o box-shadow e como funciona

A propriedade box-shadow adiciona uma ou mais sombras a um elemento. Ao contrário do border, uma sombra não afeta o fluxo do documento e não aumenta as dimensões do bloco; é desenhada "por fora", além dos limites do elemento.

Sintaxe completa:

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

Decomposição de cada parâmetro:

• offset-x, deslocamento horizontal. Um valor positivo desloca a sombra para a direita, um valor negativo desloca-a para a esquerda.
• offset-y, deslocamento vertical. Um valor positivo move a sombra para baixo, um valor negativo move-a para cima. Estes são os dois únicos parâmetros obrigatórios.
• blur-radius, o raio de desfoque. Quanto maior o valor, mais suave e larga é a sombra. O padrão é 0, o que significa uma sombra com arestas vivas.
• spread-radius, o raio de expansão. Um valor positivo expande a sombra para fora, um valor negativo encolhe-a para dentro. Útil para simular contornos sem border.
• color, a cor em qualquer formato: hex, rgb(), rgba(), hsl(). A transparência via rgba() ou hsla() produz as sombras mais naturais.

O truque é que pode passar vários valores, separados por vírgulas. É precisamente isto que abre a porta às técnicas abaixo: cada sombra subsequente na lista é sobreposta à anterior.

1. Sombra quase invisível em três lados

Uma sombra minimalista que adiciona profundidade, mas não grita por atenção. Perfeita para cartões de produto, pré-visualizações de artigos e quaisquer blocos sobre um fundo claro.

1
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

Um deslocamento apenas para baixo de 8px e um grande desfoque de 24px criam um efeito de bloco flutuante. Uma opacidade de 0,2 torna a sombra quase invisível sobre branco, apenas o suficiente para o olho se sentir confortável.

2. Sombra ligeira em todos os lados

Quando um bloco precisa de uma sombra uniforme em todo o seu perímetro, por exemplo, para uma janela modal ou uma dica de contexto.

1
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

O deslocamento horizontal zero e um spread-radius de 0px distribuem a sombra simetricamente. Um blur-radius grande (29px) torna a transição suave. A cor rgba(100, 100, 111, ...) dá um tom cinza frio; fica melhor sobre branco do que preto puro.

3. Sombra fina para a direita e para baixo

O clássico efeito "elevado". Funciona para botões, cartões com estados de hover e qualquer elemento que deva parecer tátil.

1
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Valores de deslocamento pequenos (cerca de 2px) e um desfoque pequeno criam uma sombra nítida, quase vetorial. Combina bem com transform: translateY(-2px) no hover; a sombra "move-se" com o bloco, realçando o efeito de elevação.

4. Sombra rica em todos os lados

Para casos em que um elemento precisa de se destacar notoriamente do fundo: secções hero, cartões com conteúdo importante, banners.

1
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

Alta opacidade (0,35) e um desfoque pequeno (15px) produzem uma sombra pronunciada e legível. Com deslocamento horizontal zero, distribui-se uniformemente; o bloco parece estar a flutuar acima da página.

5. Sombra difusa com várias camadas

Cinco camadas de sombra a trabalhar em conjunto: uma camada profunda para separação do fundo, as restantes para difusão suave nos lados.

1
box-shadow:
2
  rgba(0, 0, 0, 0.25) 0px 54px 55px,
3
  rgba(0, 0, 0, 0.12) 0px -12px 30px,
4
  rgba(0, 0, 0, 0.12) 0px 4px 6px,
5
  rgba(0, 0, 0, 0.17) 0px 12px 13px,
6
  rgba(0, 0, 0, 0.09) 0px -3px 5px;

A primeira camada é a sombra principal para baixo (54px, opacidade 0,25). A segunda é uma sombra ligeira para cima (deslocamento negativo -12px). As restantes refinam as arestas. Juntas, produzem um padrão de luz e sombra complexo e realista, como um objeto físico sob iluminação difusa.

6. Contorno fino com uma sombra interior

Duas sombras criam a ilusão de um contorno fino (border) ao mesmo tempo que adicionam profundidade. Nem um único border no código.

1
box-shadow:
2
  rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
3
  rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
4
  rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

Decomposição das três camadas:

• Primeira, o "contorno": deslocamento e desfoque zero, spread-radius de 2px imita border: 2px solid.
• Segunda, a sombra principal para baixo para dar volume.
• Terceira, uma sombra inset branca vinda de cima, dando um realce (efeito de vidro).

7. Sombra para a esquerda e para baixo

Uma direção não convencional: a sombra cai para a esquerda e ligeiramente para baixo. Fica bem em elementos alinhados à direita ou para criar uma composição assimétrica.

1
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

Um deslocamento horizontal negativo (-4px) envia a sombra para a esquerda. Um spread-radius negativo (-6px) encolhe a sombra para dentro, tornando-a mais compacta do que o próprio bloco; não "espreita" para além das arestas.

8. Sombra de dois lados: luz do canto superior esquerdo, sombra no canto inferior direito

Simulação de uma fonte de luz direcional, como se um candeeiro estivesse a brilhar a partir do canto superior esquerdo.

1
box-shadow:
2
  rgba(136, 165, 191, 0.48) 6px 2px 16px 0px,
3
  rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

A primeira camada é uma sombra azulada (rgba(136, 165, 191, ...)) à direita e em baixo. A segunda é um «brilho» branco à esquerda e em cima (deslocamentos negativos, opacidade elevada). Juntas criam um efeito tridimensional realista; o bloco parece estar iluminado por uma softbox.

9. Bordo com brilho colorido

Uma única sombra com deslocamento e desfoque a zero, mas com um raio de expansão positivo, produz um brilho colorido nítido à volta do elemento.

1
box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

Um brilho azul (rgba(3, 102, 214, ...)) com um raio de 3px. Perfeito para inputs em foco (:focus), botões ativos e para destacar o item de menu atual. Substitua a cor por rgba(220, 38, 38, 0.3) e obtém um destaque de erro de validação.

10. Sombra interior dupla para um efeito «pressionado»

Duas camadas inset criam um efeito côncavo profundo. Adequado para fundos com textura, botões pressionados e painéis decorativos.

1
box-shadow:
2
  rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
3
  rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

A palavra-chave inset move a sombra para dentro do elemento. A primeira camada é uma sombra larga vinda de cima. A segunda é mais escura e comprimida, também vinda de cima. Um raio de expansão negativo (-12px, -18px) impede que as sombras preencham todo o bloco; os bordos permanecem claros enquanto o centro fica rebaixado.

11. «Cascata» colorida de sombras para baixo

Cinco camadas da mesma cor com deslocamento crescente criam um efeito de sombra colorida em várias camadas, como no Material Design, mas mais brilhante.

1
box-shadow:
2
  rgba(240, 46, 170, 0.4) 0px 5px,
3
  rgba(240, 46, 170, 0.3) 0px 10px,
4
  rgba(240, 46, 170, 0.2) 0px 15px,
5
  rgba(240, 46, 170, 0.1) 0px 20px,
6
  rgba(240, 46, 170, 0.05) 0px 25px;

Cada camada subsequente é deslocada mais 5px e tem menor opacidade. Não é especificado desfoque, pelo que as sombras são nítidas, como riscas vetoriais. Isto produz um rasto neon brilhante atrás do bloco. Substitua o rosa pela cor da sua marca para obter um acento reconhecível.

12. «Cascata» colorida para a direita e para baixo

A mesma técnica, mas com deslocamento horizontal; a sombra vai na diagonal.

1
box-shadow:
2
  rgba(240, 46, 170, 0.4) 5px 5px,
3
  rgba(240, 46, 170, 0.3) 10px 10px,
4
  rgba(240, 46, 170, 0.2) 15px 15px,
5
  rgba(240, 46, 170, 0.1) 20px 20px,
6
  rgba(240, 46, 170, 0.05) 25px 25px;

Uma cascata diagonal cria uma sensação de movimento para a direita e para baixo. Fica ótimo em botões ao passar o rato; o bloco parece «deslizar» atrás da sua sombra.

13. Sombra difusa com gradiente de densidade

Cinco camadas em que cada deslocamento subsequente duplica (2px, 4px, 8px, 16px, 32px) enquanto a opacidade permanece constante. O resultado é uma sombra com um gradiente de densidade suave, a mais realista da coleção.

1
box-shadow:
2
  rgba(0, 0, 0, 0.09) 0px 2px 1px,
3
  rgba(0, 0, 0, 0.09) 0px 4px 2px,
4
  rgba(0, 0, 0, 0.09) 0px 8px 4px,
5
  rgba(0, 0, 0, 0.09) 0px 16px 8px,
6
  rgba(0, 0, 0, 0.09) 0px 32px 16px;

Um pequeno desfoque para cada camada (1px, 2px, 4px, 8px, 16px) cresce proporcionalmente ao deslocamento. Isto produz uma difusão fisicamente precisa; a sombra «desvanece» com a distância, como no mundo real. Perfeito para cartões que precisam de parecer o mais naturais possível.

Três formas de incluir CSS no HTML

Depois de escolher um snippet, é preciso adicioná-lo à página. O CSS oferece três opções, e cada uma tem o seu nicho.

CSS interno

As regras são colocadas numa tag <style> dentro do <head> do documento HTML. Adequado para sites de uma só página e protótipos rápidos; fica tudo num único ficheiro.

1
<html lang="ru">
2
<head>
3
  <meta charset="utf-8">
4
  <title>CSS box-shadow — примеры</title>
5
  <style>
6
    .card {
7
      display: block;
8
      margin: 0 auto;
9
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
10
    }
11
  </style>
12
</head>
13
<body>
14
  <img class="card" src="screenshot.jpg" alt="Пример карточки с тенью">
15
</body>
16
</html>

A desvantagem é que os estilos não são armazenados em cache separadamente pelo navegador e não podem ser reutilizados noutras páginas.

CSS inline

Os estilos são escritos diretamente no atributo style de um elemento HTML. É a forma mais rápida de aplicar estilos na hora, mas também a mais inconveniente de manter.

1
<img
2
  src="screenshot.jpg"
3
  alt="Пример карточки с тенью"
4
  style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display: block; margin: 0 auto;"
5
>

Use estilos inline de forma seletiva: para valores dinâmicos vindos de JavaScript, para layouts de email (onde as folhas de estilo externas são frequentemente removidas pelos clientes de email) e para CSS crítico "above the fold".

CSS externo

As regras são movidas para um ficheiro .css separado e ligadas através de <link>. Esta é a norma para qualquer projeto mais complexo do que uma única página.

Ficheiro styles.css:

1
.card {
2
  display: block;
3
  margin: 0 auto;
4
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
5
}

Documento HTML:

1
<html lang="ru">
2
<head>
3
  <meta charset="utf-8">
4
  <title>CSS box-shadow — примеры</title>
5
  <link rel="stylesheet" href="styles.css">
6
</head>
7
<body>
8
  <img class="card" src="screenshot.jpg" alt="Пример карточки с тенью">
9
</body>
10
</html>

O CSS externo é armazenado em cache pelo navegador, fácil de manter e escalável. Nos três casos, o resultado da renderização é o mesmo; escolha o método com base na arquitetura do seu projeto.

Um vídeo curto mas denso (8 minutos): o autor mostra como substituir sombras planas cinzentas por brilhos em gradiente, camada a camada, explicando cada parâmetro.

⁉️🤔 Perguntas frequentes

Qual é a diferença entre box-shadow e filter: drop-shadow()?

O box-shadow segue a forma da caixa delimitadora do elemento, sempre um retângulo. O filter: drop-shadow() segue o canal alfa e traça a forma real: para um PNG com transparência, a sombra seguirá o contorno do objeto em vez da moldura retangular. É por isso que o drop-shadow() é indispensável para imagens com fundo recortado, ícones e SVG. Mas funciona mais lentamente porque o navegador analisa pixels, e não a geometria do bloco.

Quantas camadas de box-shadow se podem definir sem perder desempenho?

Não há um limite formal, mas o teto prático num dispositivo médio é de 10 a 15 camadas. Acima disso, começará a notar quedas de FPS durante o scroll e as animações, especialmente em dispositivos móveis. A razão é que cada camada exige uma passagem de renderização separada. Para elementos animados, limite-se a 2 ou 3 camadas e use will-change: box-shadow; isto dá uma dica ao navegador para mover o elemento para uma camada de composição separada.

Como se visualiza e faz debug ao box-shadow nas DevTools do Chrome?

Abra as DevTools (F12), selecione o elemento no separador Elements e encontre a propriedade box-shadow no painel Styles à direita. Clique no ícone do quadrado colorido ao lado do valor; será aberto um editor visual de sombras com cursores para offset-x, offset-y, blur e spread. Pode alterar os valores com o rato e ver o resultado imediatamente. Para sombras com várias camadas, cada camada é editada separadamente; elas estão listadas no mesmo campo, separadas por vírgulas.

O que é o neumorfismo e como se consegue com box-shadow?

O neumorfismo é um estilo visual em que os elementos parecem "moldados" no mesmo material do fundo. Consegue-se com duas sombras: uma clara no canto superior esquerdo e uma escura no canto inferior direito (como na técnica #8). A condição chave é que o fundo da página e a cor do elemento coincidam ou sejam muito próximas. Exemplo para um tema claro:

1
> .neuromorphic {
2
>   background: #e0e0e0;
3
>   box-shadow:
4
>     8px 8px 16px #bebebe,
5
>     -8px -8px 16px #ffffff;
6
> }
7
> 
8
 
9
 markdown 
10
 
11
The style is striking but controversial from an accessibility standpoint: low contrast makes elements hard to distinguish for people with visual impairments. Use sparingly and be sure to check contrast.
12
 
13
**Can you use box-shadow to render shapes without a div?**
14
 
15
> Yes, and this is a separate genre of CSS art. Since `box-shadow` supports an unlimited number of layers, each with its own coordinates and color, you can "draw" pixel art with a single `box-shadow` on a single `div`. The technique works like this: each layer with a 1px × N offset and zero blur is one "pixel." Hundreds of layers combine into an image. Generators like [CSS Box Shadow Generator](https://getcssscan.com/css-box-shadow-examples) automate the process, but for production this is more of a novelty; SVG will do the job more efficiently.
16
 
17
## Which shadow should you choose for your project?
18
 
19
The thirteen techniques above cover the full spectrum: from an unobtrusive shadow for modest cards to a bold neon cascade. The key skill here is not memorizing all the snippets but understanding the logic of the parameters; then you can assemble the right shadow for the task faster than you can find a ready-made one.
20
 
21
A quick guide:
22
 
23
- Need depth without visual noise? Use techniques **1-3** (barely visible single shadows).
24
- Want realistic "hovering" above the page? **5** (multi-layered diffused) or **13** (density gradient).
25
- Want to highlight an interactive element with color? **9** (colored border) or **11-12** (colored cascade).
26
- Simulating pressed or glass effect? **6** and **10** (inset shadows).
27
- Need neumorphism? **8** (two-sided shadow) plus a background matching the element.
28
 
29
Bookmark this page as a cheat sheet. And if you create your own signature shadow recipe, test it on real devices: the same shadow can look completely different on a Retina display and on a budget office monitor.