drop-shadow()

Creates a drop shadow effect on an element.

Syntax

filter: drop-shadow(<offset-h> <offset-v> <blur> <color>);
  • <offset-h> (required): The horizontal offset of the shadow. Negative values will move the shadow to the left.
  • <offset-v> (required): The vertical offset of the shadow. Negative values will move the shadow up.
  • <blur> (optional): The blur of the shadow. A default value of 0 will create a hard shadow.
  • <color> (optional): The color of the shadow. If unset, the value will be the color property value.

Example 1

Give the image a drop shadow offset horizontally 12px, vertically 12px with a blur of 5px and a color of red.

.banner-image {
filter: drop-shadow(12px 12px 5px red);
}

Example 2

Give the image a drop shadow offset horizontally -12px, vertically -12px with a blur of 2em and a color of purple.

.banner-image {
filter: drop-shadow(-12px -12px 2em purple);
}
Edit this page on GitHub

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your feedback.

Learn CSS on Codecademy

Edit this page on GitHub

Contributors