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 the box-shadow
property), with the exception that the inset
keyword is not allowed.
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 value of the color
property is used./* Black shadow with 10px blur */ drop-shadow(16px 16px 10px black) /* Reddish shadow with 1rem blur and .3rem spread */ /* WARNING: not generally supported by browsers */ 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