The drop-shadow() CSS function applies a drop shadow effect to the input image. Its result is a <filter-function>.

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

drop-shadow()

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.

Syntax

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 offset-y (required)

Two <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)

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.

color (optional)

The color of the shadow, specified as a <color>. If unspecified, the value of the color property is used.

Examples

Setting a drop shadow using pixel offsets and blur radius

/* Black shadow with 10px blur */ drop-shadow(16px 16px 10px black) 

Setting a drop shadow using rem offsets and blur radius

/* Reddish shadow with 1rem blur */ drop-shadow(.5rem .5rem 1rem #e23) 

Specifications

Specification
Filter Effects Module Level 2 # funcdef-filter-drop-shadow

See also

<filter-function> CSS box-shadow property blur() brightness() contrast() grayscale() hue-rotate() invert() opacity() saturate() sepia()

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)Français日本語中文 (简体) Change language