sombra inset CSS profundidade
A palavra-chave `inset` no `box-shadow` inverte a direção do offset-y e do offset-x: em vez de a sombra se projetar para fora do elemento, ela nasce dentro dele, encostada na borda interna. É a base de pressed states em botões, campos de input afundados, neumorphism e qualquer efeito onde o elemento deve parecer estar abaixo da superfície da tela em vez de flutuando sobre ela.
Combina com `transform: translateY(1px)` para efeito completo de pressão.
Interno para profundidade + externo para focus ring de acessibilidade.
Sombra escura no canto que recebe menos luz e sombra clara no canto oposto. As duas invertidas viram a versão elevada do mesmo elemento.
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.
Sim. O CSS aplica os dois ao mesmo elemento sem problema. É comum ter um inset para profundidade interna e um outer para focus ring ou elevação simultaneamente.
Neumorphism tem problemas sérios de acessibilidade porque o baixo contraste entre os elementos torna difícil para usuários com baixa visão identificar interativos. Prefira aplicar apenas em elementos secundários ou decorativos.
Não. Ao contrário de `border`, que soma sua espessura à largura e altura do elemento (a menos que `box-sizing: border-box` esteja ativo), `box-shadow: inset` é puramente visual e nunca desloca o layout, mesmo em blur e spread altos.
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25);O CSS é gerado localmente no navegador.