The 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;
}

The drop-shadow function

Syntax

Values

Example

See also