Функция drop-shadow

Функция drop-shadow позволяет добавить тень к фоновому изображению.

Синтаксис

селектор {
	filter: drop-shadow(сдвиг по x, сдвиг по y, радиус размытия, цвет);
}

Значения

Значение	Описание
сдвиг по x	Смещение тени по горизонтали относительно фона. Положительное число обозначает сдвиг тени вправо, отрицательное - влево. Обязательный параметр.
сдвиг по y	Смещение тени по вертикали относительно фона. Положительное число обозначает сдвиг тени вниз, отрицательное - вверх. Обязательный параметр.
размытие	Устанавливает радиус размытия тени. Чем больше значение, тем больше тень размывается. Опциональный параметр. По умолчанию равно `0`.
цвет	Цвет тени. Опциональный параметр. По умолчанию устанавливается черный цвет тени.

Пример

Давайте установим для нашего изображения голубую тень без смещения по осям, с размытием 5px:

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

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

Смотрите также

функция blur,
которая размывает фон
функция brightness,
которая задает яркость фону
функция contrast,
которая задает контрастность фону
функция hue-rotate,
которая задает цветность фону
функция invert,
которая инвертирует цвета фона
функция opacity,
которая задает прозрачность фону
функция sepia,
которая преобразует фон в сепию
свойство background,
представляющее собой свойство-сокращение для фона
свойство background-image,
с помощью которого блоку можно задать фоновую картинку