The drop-shadow() CSS function applies a drop shadow effect to the input image. Its result is a <filter-function>.
A drop shadow is effectively a blurred, offset version of the input image's alpha mask, drawn in a specific color and composited below the image.
Note: This function is somewhat similar to the box-shadow property. The box-shadow property creates a rectangular shadow behind an element's entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself.
drop-shadow(offset-x, offset-y, blur-radius, spread-radius, color)
The drop-shadow() function accepts a parameter of type <shadow> (defined in CSS3 Backgrounds), with the exception that the inset keyword is not allowed. This function is similar to the more established box-shadow property; the difference is that with filters, some browsers provide hardware acceleration for better performance. The parameters of the <shadow> parameter are as follows.
offset-x offset-y (required)
<length> values that determine the shadow offset. offset-x specifies the horizontal distance, where negative values place the shadow to the left of the element. offset-y specifies the vertical distance, where negative values place the shadow above the element. If both values are 0, the shadow is placed directly behind the element.blur-radius (optional)
<length>. The larger the value, the larger and more blurred the shadow becomes. If unspecified, it defaults to 0, resulting in a sharp, unblurred edge. Negative values are not allowed.spread-radius (optional)
<length>. Positive values will cause the shadow to expand and grow bigger, while negative values will cause the shadow to shrink. If unspecified, it defaults to 0, and the shadow will be the same size as the input image.color (optional)
<color>. If unspecified, the default value depends on the browser. In Firefox and Internet Explorer, the value of the color property is used. On the other hand, WebKit's shadow is transparent by default, and therefore of limited use if this value is omitted./* Black shadow with 10px blur and no spread */ drop-shadow(16px 16px 10px black) /* Reddish shadow with 1rem blur and .3rem spread */ drop-shadow(.5rem .5rem 1rem .3rem #e23)
<filter-function>box-shadow property
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow