Box Shadow - Propriedade CSS

Interação com a luz é a maneira como vemos as coisas, nessa interação com a luz é comum a geração de sombras sobre os objetos, o uso de sombras em interfaces Web trás uma sensação de volume e elevação

Conceito

A propriedade box-shadow do CSS projeta uma cópia do elemento com uma cor única

box-shadow: <deslocamento-horizontal> <deslocamento-vertical> <raio de desfoque>
  <raio de espalhamento> <cor>;

Detalhamento dos atributos

• deslocamento horizontal: Quando a sombra está projetada para direita quando positivo e esquerda para valores negativas;
• deslocamento vertical: Quando a sombra está projetada para baixa quando positivo e cima para valores negativas;
• raio de desfoque: Quando a sombra possui desfoque devido a difusão da luz, a irregularidade de inscidência dela;
• raio de espalhamento (opcional): Tamanho adicional para a sombra, somando medida apartir do centro ou reduzindo da borda quando negativo, uma boa indicação de ângulo da luz sobre o objeto;
• cor: Cor da sombra, lembrado a possiblidade de controlar opacidade pela cor.

Incidência de luz

Podemos usar para projetar uma sombra e indicar luz

Luz Ambiente

É a luz vindo sem direcionamento de todos os ângulos criando uma sombra difusa, fazemos ela sem colocar deslocamento

box-shadow: 0 0 8px 1px #000003f;

Luz Chave

Uma luz chave é direcionada, com deslocamento na direção oposta da luz, no caso vindo de cima e do lado direito para fazer essa vamos colocar o deslocamento da direita (4px) e para baixo (4px)

box-shadow: 4px 4px 8px 1px #000003f;

Exemplos da direção das luzes

Várias fontes de luzes

Luz Combinada

Junção das luzes ambientes e luz chave, adicionando as duas sombras como uma lista separado por vírgula

box-shadow: 0 0 8px 1px #000003f, 4px 4px 8px 1px #000003f;

Luz de fundo

Um objeto com uma fonte de luz uniforme vindo de trás, como uma sanca no teto

Usamos uma sombra sem deslocamentos com desfoque e espalhamento

box-shadow: 0 0 8px 4px #e0138c;

Iluminação interna

Com as luzes vindo de forma regular internamente das margens

Basta incluir o inset para frente dos atributos

box-shadow: inset 0 0 8px 4px #e0138c;

Objetos espelhos

As sombras podem ser usadas para desenhar novos objetos com o mesmo formato

Podemos fazer o espalhamento um como positivo para aumentar e outro como negativo para reduzir o tamanho da sombra

box-shadow: -120px 0 0 10px #e0138c, 100px 0 0 -10px #e0138c;

Efeito de elevação com mouse

Para mudança de elevação podemos aumentar o desfoque da luz ambiente e deslocamento e desfoque para a luz chave, como no exemplo ao passar o mouse

Elemento HTML com a classe card-box-shadow

<div class="card-box-shadow"></div>

Estilo com transition de 300ms hover para um efeito suave passando a impressão que está subindo

.card-box-shadow {
  width: 160px;
  height: 160px;
  border-radius: 8px;
  box-shadow: 0 0 8px 1px #000003f, 8px 8px 16px 2px #000003f;
  transition: box-shadow 0.3s;
}

.card-box-shadow:hover {
  box-shadow: 0 0 16px 2px #000003f, 16px 16px 32px 4px #000003f;
}

Pequeno exemplo

Uma pequena chama com sombras, ou luzes :)

Segue o CSS

.fire {
  width: 50px;
  height: 50px;
  background: #ffb726;
  border-radius: 15% 75% 50% 75%;
  transform: rotate(45deg);
  box-shadow: -10px -10px 0 15px #ff7d17, -20px -20px 0 30px #ff6236,
    -30px -30px 10px 45px #ff62343f;
}

Referências

W3Schools - Box Shadow

Material Designer - Light and shadows