Como usar
- Defina o Deslocamento horizontal e o Deslocamento vertical da primeira camada. Um deslocamento vertical positivo move a sombra para baixo.
- Aumente o Desfoque para suavizar a borda, e a Expansão para deixar a sombra maior ou menor que a caixa.
- Escolha uma Cor e uma Opacidade. Adicione mais camadas com Adicionar camada para uma sombra com aparência mais natural.
- Copie a declaração CSS e cole-a na regra do seu elemento.
Como o valor é montado
A propriedade box-shadow recebe uma ou mais sombras separadas por vírgulas. Cada uma é escrita com a palavra inset opcional, os deslocamentos horizontal e vertical, o raio de desfoque, a distância de expansão e uma cor. A primeira sombra é desenhada por cima das outras, e sem sombra o valor é none.
O raio de desfoque nunca é negativo. Um desfoque maior espalha a sombra suavemente por uma área maior; uma expansão aumenta ou diminui a sombra antes de o desfoque ser aplicado. A opacidade é escrita como o valor alfa de uma cor rgba, com no máximo duas casas decimais.
box-shadow: [inset] deslocamento-x deslocamento-y desfoque expansão cor, ...Camadas e o que o editor confere
Uma sombra suave e natural costuma ter duas camadas: uma pequena e escura, perto da caixa, e uma maior e mais clara, mais afastada. Cada camada é uma sombra do valor. O editor permite até 8 camadas, deslocamentos e expansão de -200 a 200 pixels, desfoque de 0 a 200 pixels e opacidade de 0 a 100 por cento.
A visualização usa o mesmo valor do código, então o que você vê é o que o navegador desenha. Desfoques e expansões muito grandes demoram mais para desenhar em um celular antigo, então use os menores valores que resolvem.
Exemplo resolvido: um cartão com duas camadas
A primeira camada tem deslocamento de 0 e 4 pixels, com desfoque de 6 e sem expansão, em preto com opacidade de 10 por cento. A segunda tem deslocamento de 0 e 10 pixels, com desfoque de 20, a 15 por cento. O valor é 0px 4px 6px 0px rgba(0, 0, 0, 0.1), 0px 10px 20px 0px rgba(0, 0, 0, 0.15).
Colado em um cartão, isso dá uma sombra nítida sob o cartão e suave mais abaixo.
Perguntas frequentes
O que faz o inset?
Uma sombra interna é desenhada dentro da caixa, ao longo das bordas, como se a caixa estivesse pressionada para dentro. Ela é útil em campos de entrada e em botões pressionados. Uma caixa pode ter sombras internas e externas ao mesmo tempo.
Por que os deslocamentos têm sinal?
Um deslocamento horizontal positivo move a sombra para a direita, e um negativo para a esquerda. Um deslocamento vertical positivo a move para baixo, então uma sombra que cai abaixo de uma caixa tem valor positivo.
Qual é a diferença entre desfoque e expansão?
O desfoque suaviza a borda da sombra, fazendo-a desaparecer em uma área maior. A expansão torna a própria sombra maior, ou menor quando é negativa, antes do desfoque. O desfoque nunca fica abaixo de zero, mas a expansão pode.
O CSS gerado funciona em todos os navegadores?
A propriedade box-shadow sem prefixo, com várias camadas separadas por vírgulas e cores rgba, é aceita por todos os navegadores atuais e já é assim há anos. A declaração pode ser usada como está, sem prefixo de fornecedor.
O editor guarda ou envia alguma coisa?
Não. A sombra é desenhada no seu navegador, e nada é guardado nem enviado para o nosso servidor. Copie o CSS antes de sair da página, porque ao recarregar a página ela volta à sombra padrão.
Fontes
Números e texto verificados pela última vez em terça-feira, 10 de novembro de 2026.