# Функция 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`,
  с помощью которого блоку можно задать фоновую картинку

← →
↑
en ru