sombra inset CSS profundidade

Sombra inset CSS: efeitos de profundidade, neumorphism e pressed state

A palavra-chave `inset` no box-shadow inverte a direção da sombra: em vez de projetar para fora, ela aparece dentro do elemento. Isso é usado para criar "pressed states" em botões, campos de input afundados, efeitos de neumorphism e quaisquer situações onde o objetivo é que o elemento pareça estar abaixo da superfície da tela.

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

Como combinar inset e outer para efeitos completos

O neumorphism usa uma técnica de dupla sombra: uma sombra externa clara no canto superior-esquerdo e uma escura no canto inferior-direito (ou vice-versa), criando ilusão de extrusão. No estado pressionado, as sombras são invertidas usando `inset`. A chave é que o fundo, o elemento e as sombras usem a mesma tonalidade.
Para inputs e textareas, uma borda inset sutil substitui `border` e transmite a sensação de campo afundado. `box-shadow: inset 0 2px 4px rgba(0,0,0,.12)` é um padrão muito usado que dá a leitura de "você digita aqui" sem aparência genérica.

Casos de uso do inset shadow

Pressed state de botão

Entrada: :active pseudo-class em botão
Saída esperada: box-shadow: inset 0 2px 4px rgba(0,0,0,.2), inset 0 1px 2px rgba(0,0,0,.15);

Combina com `transform: translateY(1px)` para efeito completo de pressão.

Campo de input afundado

Entrada: input:focus
Saída esperada: box-shadow: inset 0 2px 6px rgba(0,0,0,.1), 0 0 0 2px rgba(61,220,151,.3);

Interno para profundidade + externo para focus ring de acessibilidade.

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

Posso misturar inset e outer shadow no mesmo elemento?

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 é acessível?

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.