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.

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.

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 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.

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 property
• text-shadow property