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.

Syntax

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.

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.

spread-radius (optional)

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.

Most browsers do not support this parameter; the effect will not render if used.

color (optional)

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

Examples

/* 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)

See also

• <filter-function>
• CSS box-shadow property