The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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)
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.
<length>values that determine the shadow offset.
offset-xspecifies the horizontal distance, where negative values place the shadow to the left of the element.
offset-yspecifies 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.
- The shadow's blur radius, specified as a
<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.
- The shadow's spread radius, specified as a
<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.
Chrome and Safari (WebKit-based browsers) do not support this parameter; the effect will not render if used.
- The color of the shadow, specified as a
<color>. If unspecified, the default value depends on the browser. In Firefox and Internet Explorer, the value of the
colorproperty 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)