PT-BR

Gerador de box-shadow CSS

Escolha um modelo ou ajuste deslocamento, desfoque, expansão, cor e opacidade nos controles. Dá para empilhar várias sombras e transformar qualquer uma em sombra interna (inset). A prévia atualiza na hora e o código CSS é copiado com um clique. Você também pode colar seu próprio CSS abaixo e continuar editando.

Ajustar a sombra

Modelos

box-shadow:
  0 10px 25px -5px rgba(0, 0, 0, 0.25),
  0 8px 10px -6px rgba(0, 0, 0, 0.1);
Uma sombra por linha, separadas por vírgula – ex.: 0 4px 12px rgba(0, 0, 0, 0.12)
Seus dados ficam salvos só neste navegador.

Resultado

Declaração CSS
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
Sombras (a primeira fica por cima)
NºDeslocamento X (px)Deslocamento Y (px)Desfoque (px)Expansão (px)CorTipo
10 px10 px25 px-5 pxrgba(0, 0, 0, 0.25)externa
20 px8 px10 px-6 pxrgba(0, 0, 0, 0.1)externa
Quanto a sombra passa da caixa (aprox.)
em cima 10 px · direita 20 px · embaixo 30 px · esquerda 20 px

Como o cálculo é feito

Como o box-shadow funciona

Segundo a especificação do W3C (CSS Backgrounds and Borders Level 3), uma sombra tem de dois a quatro comprimentos, uma cor opcional e a palavra-chave opcional inset:

ValorSignificado
1º comprimentoDeslocamento horizontal para a direita (negativo: para a esquerda)
2º comprimentoDeslocamento vertical para baixo (negativo: para cima)
3º comprimentoRaio de desfoque, nunca negativo; 0 se omitido
4º comprimentoExpansão (spread): aumenta a sombra; valor negativo diminui
Corse omitida, vale a cor do texto (currentColor)
insetdesenha a sombra dentro da caixa

Separe várias sombras com vírgulas. A primeira sombra fica por cima e as outras atrás. Sombras não mexem no layout nem criam barras de rolagem – mas um elemento pai com overflow: hidden corta a sombra.

Até onde vai o desfoque?

A especificação exige um desfoque próximo de um desfoque gaussiano com desvio padrão igual à metade do raio de desfoque. A transição fica com cerca do dobro do valor de desfoque, centrada na borda da sombra – para fora, ela vai mais ou menos um raio de desfoque.

Exemplo 0 10px 25px -5px: a borda fica 25 − 5 = 20 px fora da caixa, deslocada 10 px para baixo. A sombra passa cerca de 20 − 10 = 10 px em cima, 20 px nas laterais e 20 + 10 = 30 px embaixo. O gerador mostra esses valores em “Quanto a sombra passa da caixa” – úteis como padding para nada ser cortado.

Usos comuns

Perguntas frequentes

Qual a diferença entre blur e spread?

O desfoque (3º valor) suaviza a borda sem mudar a área da sombra. A expansão (4º valor) aumenta ou diminui a própria área antes do desfoque. Com desfoque 0 e expansão positiva, você tem um contorno nítido.

Como empilhar várias sombras?

Separe com vírgulas, ex.: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24). A primeira sombra é desenhada por cima. No gerador, adicione mais com “+ Sombra”.

Por que minha sombra está cortada?

Sombras não contam no tamanho do elemento. Se um elemento pai tem overflow: hidden ou overflow: auto, tudo o que passa dele é cortado. Dê ao elemento pai pelo menos o padding que o gerador mostra.

O box-shadow funciona em todos os navegadores?

Sim. box-shadow, com várias sombras, inset e cores rgba(), funciona sem prefixo em todos os navegadores atuais. O gerador escreve cores transparentes em rgba(), que navegadores antigos também entendem.

Fontes e base legal

Última atualização:

Ferramentas relacionadas