Como usar
- Comece com uma predefinição ou ajuste o deslocamento, o desfoque, a expansão, a cor e a opacidade da primeira camada.
- Adicione camadas para criar uma profundidade mais natural ou marque “Inset” para usar uma sombra interna.
- Altere o fundo da prévia e a cor da caixa para combinar com seu design e copie o CSS.
Como funciona
Cada camada de box-shadow recebe: deslocamento horizontal, deslocamento vertical, raio de desfoque, expansão e cor, com inset opcional no início. Deslocamentos positivos movem a sombra para a direita e para baixo. O desfoque suaviza a borda e não pode ser negativo; a expansão aumenta (valor positivo) ou reduz (valor negativo) a sombra antes do desfoque. As camadas são separadas por vírgulas, e a primeira é renderizada por cima.
Uma elevação realista costuma combinar uma sombra pequena e definida com outra maior e mais suave, com baixa opacidade — é assim que funciona a predefinição “Elevated”. As cores são escritas como rgba() para que a opacidade fique explícita. As sombras acompanham o border-radius do elemento e não ocupam espaço no layout, portanto não deslocam outros elementos.
Sombras com valores de desfoque muito altos em muitos elementos podem deixar a rolagem mais lenta em celulares de baixo desempenho. Se você animar uma sombra, geralmente é mais suave fazer aparecer gradualmente um pseudo-elemento que já tenha a sombra do que animar o próprio box-shadow.
Exemplos
Cartão em uma página clara
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); dá ao cartão uma borda definida e uma elevação suave.
Contorno de foco sem deslocar o layout
Uma camada com deslocamento 0, desfoque 0 e expansão de 3px na cor da sua marca cria um contorno sólido ao redor de um botão. Ao contrário de uma borda, ela não altera o tamanho do elemento.
Campo de entrada pressionado
inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) dá a um campo de texto uma aparência levemente rebaixada.
Perguntas frequentes
Qual é a diferença entre box-shadow e filter: drop-shadow()?
box-shadow acompanha a caixa e o border-radius do elemento e permite expansão e inset. drop-shadow() acompanha a forma visível, incluindo áreas transparentes de imagens PNG ou SVG, mas não permite expansão nem inset.
Por que minha sombra está cortada?
Um elemento pai com overflow: hidden corta tudo que ultrapassa sua caixa, inclusive sombras. Adicione espaçamento interno ao elemento pai ou remova a regra de overflow.
Quantas camadas devo usar?
Uma ou duas camadas bastam para a maioria das interfaces. Mais camadas podem deixar a aparência mais suave, mas exigem um pouco mais de processamento, o que faz diferença em listas longas.
Privacidade
O CSS é gerado no seu navegador. Nada é enviado nem armazenado.