Função drop-shadow() do CSS

Definição e uso

CSS drop-shadow() A função de filtro aplica efeitos de projeção à imagem.

Adicionar diferentes efeitos de projeção à imagem:

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

Adicionar diferentes efeitos de projeção à imagem (usando sombras horizontais e verticais negativas):

#img1 {
  filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
  filter: drop-shadow(-10px -10px 7px lightblue);
}

drop-shadow(h-shadow v-shadow blur spread color)

Valor	Descrição
h-shadow	Obrigatório. Especificar o valor em pixels do deslocamento horizontal da sombra. Valores negativos colocam a sombra no lado esquerdo da imagem.
v-shadow	Obrigatório. Especificar o valor em pixels do deslocamento vertical da sombra. Valores negativos colocam a sombra no topo da imagem.
blur	Opcional. Adicionar efeito de desfoque à sombra, em pixels. O valor maior, o efeito de desfoque mais forte (a sombra ficará maior e mais clara). Não é permitido usar valores negativos. Se não for especificado um valor, o padrão é 0 (a borda da sombra é clara).
spread	Opcional. Deve ser um valor em pixels. Valores positivos farão a sombra expandir e aumentar, enquanto valores negativos farão a sombra diminuir. Se não for especificado, o valor padrão é 0 (a sombra é do tamanho do elemento).
color	Opcional. Adicionar cor à sombra. Se não for especificado, a cor depende do navegador (geralmente preto).