box-shadow Material Design CSS
O efeito de elevação do Material Design nunca usa uma sombra única. Ele combina duas camadas de `box-shadow` com blur e opacidade diferentes: uma mais próxima e mais opaca, que simula a luz direta batendo no elemento, e outra mais larga e mais transparente, que simula a luz ambiente refletida ao redor. Quanto maior o nível de elevação, maior o deslocamento vertical e o blur das duas camadas, e menor a opacidade de cada uma. Este gerador escreve as duas camadas prontas para copiar.
Duas camadas rentes ao elemento. Boa para cards, chips e botões secundários que não precisam se destacar da superfície.
Passo intermediário entre repouso e destaque total. Funciona bem em menus dropdown e tooltips.
Padrão para diálogos modais e menus flutuantes em estado normal, acima do conteúdo da página.
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.
Não. O MD3 combina box-shadow com uma leve superposição de cor de superfície baseada na cor primária. Em telas escuras, essa superposição costuma ficar mais visível do que a própria sombra, então replicar só o box-shadow não é suficiente para o efeito completo.
Sim. Defina `--shadow-1`, `--shadow-2` e assim por diante como custom properties no `:root`, cada uma com as duas camadas já combinadas. Você troca o sistema inteiro de um único ponto e pode redefinir os mesmos nomes dentro de um bloco `@media (prefers-color-scheme: dark)`.
Porque uma sombra única e escura lê como um contorno artificial, enquanto duas sombras leves com blur e opacidade diferentes imitam como a luz realmente se comporta ao redor de um objeto físico: uma parte concentrada perto da base e outra difusa, mais larga e mais fraca.
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25);O CSS é gerado localmente no navegador.