drop-shadow() CSS Function


The drop-shadow() CSS function adds a shadow to images. In contrast to the box-shadow property, transparent areas in the image are taken into account and the shadow is cast taking into account them.


drop-shadow() = drop-shadow(offset-x offset-y blur color)


  • offset-xThe horizontal offset of the shadow relative to the picture. A positive value of this parameter sets the shadow to the right, negative - to the left. Required.
  • offset-yThe vertical offset of the shadow relative to the picture. A positive value sets the shadow to shift down, a negative value - up. Required.
  • blurSets the blur radius of the shadow. The larger this value, the stronger the shadow is smoothed, becomes wider and brighter. If this parameter is not set, it is set to 0 by default, and the shadow will be clear and not blurry.
  • colorThe shadow color in any CSS format available, by default the shadow is black. Optional parameter.


<img class="drop-shadow" src="images/nature.jpg" alt="Drop Shadow Example">
.drop-shadow {
filter: drop-shadow(0 0 10px red);

Browser Support

Explorer Edge Chrome Firefox Opera Safari
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung

Last updated by CSSPortal on: 1st December 2019