CSS drop-shadow() Function

Use the drop-shadow() function to apply a drop shadow effect to an image.

The CSS drop-shadow() function is used with the filter property to add a drop shadow effect to an image.

A drop shadow is a (typically) blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image.

The CSS drop-shadow() function accepts multiple arguments that determine the drop shadow's offset, its blur, and its color.

Basic Example

Here's an example of a basic drop shadow:

Other Effects

Your drop shadows don't necessarily always need to have an offset. For example, you could use the drop-shadow() function to create a glow around the image.

To do this, just set the offset arguments to 0. Like this:

Most drop shadows tend to have blurred edges, but there's nothing stopping you from having sharp edges. To do this, just set the blur argument to 0:

Official Syntax

The official syntax of the drop-shadow() function is as follows:

Possible Values

The drop-shadow() function accepts length values and an optional color value as its arguments.

The arguments specify the horizontal and vertical offset of the drop shadow, the amount of blur, and its color.

The && indicates that the order of the <color> and <length> values can be changed (i.e. you have the choice of specifying the color either first or last).

Here's an explanation each value:

<color>? (optional)

This value determines the color of the drop shadow. It can be any valid <color> value. For example, steelblue, #FF4500 or rgba(0,0,0,0.3) are all valid colors. If this value isn't provided, the value will be taken from the color property.

<length>{2,3}

This can be either two values or three, as indicated below:

<horizontal-offset> (required)

Determines the horizontal offset of the drop shadow. It is a length value. For example, 10px or 1em. Negative values are allowed. If a negative value is provided, the offset will result in the drop shadow being drawn to the left of the box. If it is a positive value, it will be drawn to the right.

<vertical-offset> (required)

Determines the vertical offset of the drop shadow. It is a length value. For example, 10px or 1em. Negative values are allowed. If a negative value is provided, the offset will result in the drop shadow being drawn above the box. If it is a positive value, it will be drawn below.

<blur> (optional)

Determines the Gaussian blur effect (if any). If the value is zero (i.e. 0), the edge of the shadow will be sharp. The higher the value, the more blurred the shadow will become. Negative values are not allowed for a Gaussian blur.

CSS Specifications

• The drop-shadow() function is defined in Filter Effects Module Level 1 (W3C Working Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.