Esses dias precisei entender um pouco mais sobre o uso do Box Shadow e por isso vou trazer algumas informações e dicas boas para você.

A principal função do Box Shadow é a aplicação de sombras a elementos, geralmente utilizados em caixas distrubuídas no produto.

Vamos entender a sintaxe do Box shadow e tem bonus no final do artigo.

A sintaxe do box-shadow é a seguinte:

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

Entendendo:

  • Primeiro campo sombra horizontal, valores positivos para direita, valores negativos para esquerda;
  • Segundo campo sombra vertical, valores positivos abaixo do elemento, valores negativos acima do elemento;
  • Terceiro campo, volume do blur quando mais positivo mais esfumaçado, quanto menos mais denso;
  • Quarto item, cor da sombra, No Safari (no PC), o parâmetro de cor é obrigatório. Se você não especificar a cor, a sombra não será exibida.

Para aplicar no firefox e web-kit:

-moz-box-shadow: 0 0 0 #000;
-webkit-box-shadow: 0 0 0 #000;

Mantendo a mesma sintaxe já explicada.

Valores utilizados:

ValorDescrição
noneValor padrão. Nenhuma sombra é exibida
h-offsetObrigatório. O deslocamento horizontal da sombra
v-offsetObrigatório. O deslocamento vertical da sombra.
blurOpcional. O raio do embaçamento.
spreadOpcional. O raio de propagação.
colorOpcional. A cor da sombra. O valor padrão é a cor do texto.
insetOpcional. Muda a sombra de uma sombra externa (início) para uma sombra interna
initialDefine esta propriedade com seu valor padrão.
inheritHerda essa propriedade de seu elemento pai

Bônus 1 – Lista com 91 exemplos, basta copiar e colar.

– Clique aqui –

Bônus 2 – Gerador automático para usar em projetos React Native

– Clique aqui –

E ai? Gostou do conteúdo? Quais outros elementos podemos explorar?