drop-shadow() CSS Function

Description

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.

Syntax

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

Values

  • 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.

Example

<img class="drop-shadow" src="images/nature.jpg" alt="Drop Shadow Example">
.drop-shadow {

   filter: drop-shadow(0 0 10px red);

}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
X125335409.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
535335419.36.0

Last updated by CSSPortal on: 1st December 2019