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:

<style>
  .filtered {
    filter: drop-shadow(5px 5px 10px gray);
  }
</style>

<img class="filtered" src="/pix/samples/18s.jpg" alt="Sample image">

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:

<style>
  .filtered {
    filter: drop-shadow(0px 0px 10px orange);
    margin: 20px;
  }
</style>

<img class="filtered" src="/pix/samples/18s.jpg" alt="Sample image">

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:

<style>
  .filtered {
    filter: drop-shadow(5px 5px 0 orange);
  }
</style>

<img class="filtered" src="/pix/samples/18s.jpg" alt="Sample image">

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. They're ordered as follows:

Here's more detail:

<horizontal-offset> (required): The first value 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): The second value 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): The third value determines the Gaussian blur effect (if any). It is a length value. 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.
<color> (optional): The fifth value determines the color of the drop shadow. It is a 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 (as in currentColor).

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.