box-shadow multicamada CSS
A propriedade `box-shadow` no CSS aceita uma lista de sombras separadas por vírgula. A ordem importa: a primeira sombra da lista fica sobre as demais. Sombras realistas em design moderno usam de três a cinco camadas com opacidades muito baixas (3–15%) em vez de uma sombra escura única, porque é assim que a luz se comporta em superfícies físicas, ela se difunde progressivamente. O Material Design 3 usa essa técnica para cada nível de elevação.
Clássico para cards e panels. Sensação de leveza sem agressividade visual.
Técnica usada em interfaces dark-mode para criar glow sem excesso.
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.
A especificação CSS não define limite. Na prática, 4–5 camadas cobrem todos os efeitos sem impacto de performance perceptível.
Não exatamente: border ocupa espaço no layout, inset shadow não. Box-shadow inset com spread positivo cria um contorno interno que não afeta o box-model, útil para inputs e fields de formulário.
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25);O CSS é gerado localmente no navegador.