Função drop-shadow

A função drop-shadow permite adicionar uma sombra à imagem de fundo.

Sintaxe

cssseletor {
  filter: drop-shadow(deslocamento x, deslocamento y, raio de desfoque, cor);
}

Valores

Valor	Descrição
deslocamento por x	Deslocamento da sombra na horizontal em relação ao fundo. Um número positivo indica deslocamento da sombra para a direita, um número negativo - para a esquerda. Parâmetro obrigatório.
deslocamento por y	Deslocamento da sombra na vertical em relação ao fundo. Um número positivo indica deslocamento da sombra para baixo, um número negativo - para cima. Parâmetro obrigatório.
desfoque	Define o raio de desfoque da sombra. Quanto maior o valor, mais a sombra fica desfocada. Parâmetro opcional. Por padrão é `0`.
cor	Cor da sombra. Parâmetro opcional. Por padrão é definida a cor preta para a sombra.

Exemplo

Vamos definir para nossa imagem uma sombra azul sem deslocamento nos eixos, com desfoque de 5px:

html<div id="elem"></div>

css#elem {
  filter: drop-shadow(0 0 5px #035470);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Veja também

função blur,
que desfoca o fundo
função brightness,
que define o brilho do fundo
função contrast,
que define o contraste do fundo
função hue-rotate,
que define a matiz do fundo
função invert,
que inverte as cores de fundo
função opacity,
que define a transparência do fundo
função sepia,
que transforma o fundo em sépia
propriedade background,
que é uma propriedade abreviada para o fundo
propriedade background-image,
com a qual se pode definir uma imagem de fundo para um bloco