drop-shadow()
The drop-shadow()
CSS function applies a drop shadow effect to the input image. Its result is a <filter-function>
.
Try it
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.
Syntax
css
drop-shadow(offset-x offset-y blur-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 and spread
parameters are not allowed.
Parameters
offset-x
(required)-
The horizontal offset for the shadow, specified as a
<length>
value. Negative values place the shadow to the left of the element. offset-y
(required)-
The vertical offset for the shadow, specified as a
<length>
value. Negative values place the shadow above the element. blur-radius
(optional)-
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 to0
, resulting in a sharp, unblurred edge. Negative values are not allowed. color
(optional)-
The color of the shadow, specified as a
<color>
. If unspecified, the value of thecolor
property is used.
Examples
Setting a drop shadow using pixel offsets and blur radius
css
/* Black shadow with 10px blur */
drop-shadow(16px 16px 10px black)
Setting a drop shadow using rem offsets and blur radius
css
/* Reddish shadow with 1rem blur */
drop-shadow(.5rem .5rem 1rem #e23)
Specifications
Specification |
---|
Filter Effects Module Level 1 # funcdef-filter-drop-shadow |
Browser compatibility
BCD tables only load in the browser
See also
The other <filter-function>
functions available to be used in values of the filter
and backdrop-filter
properties include:
blur()
brightness()
contrast()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
box-shadow
propertytext-shadow
property