box-shadow Material Design CSS

Box-shadow elevação Material Design: como replicar em CSS

O Material Design 3 usa um sistema de seis níveis de elevação (0–5) expressos como valores em dp. Cada nível combina sombras de dois ângulos de luz distintos: uma sombra de luz direta (umbra) e uma de luz ambiente (penumbra). A implementação em CSS usa sempre pelo menos duas camadas de box-shadow para reproduzir esse efeito com fidelidade. Esta página explica os valores exatos de cada nível.

Camadas

Inset (interior)Habilitada

Offset X0pxOffset Y8pxBlur24pxSpread0px

Cor

Opacidade25%

Presets

Forma do preview

Preview e CSS

Cor da caixa

Cor do fundo

box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25);

O CSS é gerado localmente no navegador.

Continuar na ferramenta

Abrir ferramenta completa

Mais páginas desta ferramenta

Elevação dp e como traduzir para CSS

O Material Design define elevação em densidade de pixels independente (dp). Em 160dpi (mdpi), 1dp = 1px. Em telas retina (320dpi), 1dp = 2px. Para CSS web, os valores de dp se traduzem diretamente para px na maioria dos contextos de interface desktop e mobile.
A sombra umbra (luz direta) usa menor blur e maior opacidade. A sombra penumbra (luz ambiente) usa maior blur e menor opacidade. A combinação das duas cria a ilusão de profundidade. Na prática: elevation-1 → `0 1px 2px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.1)`. Elevation-3 → `0 2px 4px rgba(0,0,0,.24), 0 2px 8px rgba(0,0,0,.12)`.

Níveis de elevação Material Design em CSS

Elevação 1 (botões texto, chips)

Entrada: dp: 1
Saída esperada: box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.1);

Mínima elevação perceptível. Usada para elementos de baixo destaque.

Elevação 3 (cards elevados, FABs)

Entrada: dp: 3
Saída esperada: box-shadow: 0 2px 4px rgba(0,0,0,.24), 0 2px 8px rgba(0,0,0,.12);

Padrão para cards e floating action buttons em estado normal.

FAQ da ferramenta completa

Posso usar múltiplas camadas de box-shadow?

Sim. O CSS permite quantas camadas quiser separadas por vírgula. Cada camada tem seus próprios parâmetros de offset, blur, spread e cor, o que permite efeitos muito mais ricos do que uma única sombra.

O que faz o parâmetro inset?

Qual a diferença entre blur e spread?

Como escolher a cor da sombra?

Box-shadow afeta o layout da página?

Sombra CSS funciona em todos os navegadores modernos?

Como replicar sombras de sistemas de design como Material ou iOS?

Box-shadow prejudica performance?

Perguntas frequentes

Material Design 3 usa apenas box-shadow?

Não. O MD3 usa uma combinação de box-shadow com um overlay de cor de superfície (surface tint) baseado na cor primária. Em interfaces dark, o overlay fica mais visível do que a sombra. Para replicar fielmente, combine o box-shadow com um `background-color` ajustado.

Posso usar variáveis CSS para os níveis de elevação?

Sim. Defina `--shadow-1`, `--shadow-2` etc. como custom properties no `:root`. Assim você muda o sistema inteiro a partir de um único ponto — e pode adaptar para dark mode com `prefers-color-scheme`.