# drop-shadow function

The `drop-shadow` function allows you to add a shadow to a background image.

## Syntax

`selector { filter: drop-shadow(x-offset, y-offset, blur radius, color); }`

## Values

Value | Description
--- | ---
x-offset | Horizontal offset of the shadow relative to a background. A positive number means the shadow shifts to the right, a negative number - to the left. Required parameter.
y-offset | The vertical offset of the shadow relative to a background. A positive number means the shadow shifts downwards, a negative number - upwards. Required parameter.
blur | Sets a shadow blur radius. The higher the value, the more the shadow is blurred. Optional parameter. Default is `0`.
color | The shadow color. Optional parameter. The default shadow color is set to black.

## Example

Let's set a blue shadow for our image without offsets along the axes, with the blur of `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; }`

:

## See also

- the `blur` function
  that blurs a background
- the `brightness` function
  that sets a background brightness
- the `contrast` function
  that sets a background contrast
- the `hue-rotate` function
  that sets a background hue
- the `invert` function
  that inverts background colors
- the `opacity` function
  that sets a background opacity
- the `sepia` function
  that converts a background to sepia
- the `background` property
  that is a shorthand property for a background
- the `background-image` property
  with that you can set a background image for a block

← →
↑
en ru