drop-shadow()

christian.dinh2481 total contributions
Published Jul 12, 2021Updated Sep 3, 2021
Contribute to Docs
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 of0
will create a hard shadow.<color>
(optional): The color of the shadow. If unset, the value will be thecolor
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);}
All contributors
- christian.dinh2481 total contributions
- Anonymous contributorAnonymous contributor3077 total contributions
- robgmerrill124 total contributions
- christian.dinh
- Anonymous contributor
- robgmerrill
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.