drop-shadow()
=============

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

Try it
------

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


```css
/\* Two length values \*/
/\* drop-shadow( <length> <length> ) \*/
drop-shadow(5px 5px)

/\* Three length values \*/
/\* drop-shadow( <length> <length> <length> ) \*/
drop-shadow(5px 5px 15px)

/\* Two length values and a color \*/
/\* drop-shadow( <length> <length> <color> ) \*/
drop-shadow(5px 5px red)

/\* Three length values and a color \*/
/\* drop-shadow( <length> <length> <length> <color> ) \*/
drop-shadow(5px 5px 15px red)

/\* The order of color and length values can be changed \*/
/\* drop-shadow( <color> <length> <length> <length> ) \*/
drop-shadow(#e23 0.5rem 0.5rem 1rem)
```


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

`<color>` Optional

Specifies the color for the shadow. If not specified, the value of the `color` property defined in the parent element is used.

`<length>`

Specifies the offset length of the shadow. This parameter accepts two or three values. If two values are specified, they are interpreted as `<offset-x>` (horizontal offset) and `<offset-y>` (vertical offset) values. Negative `<offset-x>` value places the shadow to the left of the element. Negative `<offset-y>` value places the shadow above the element. If not specified, the value of `0` is used for the missing length. If a third value is specified, it is interpreted as `<standard-deviation>`, which is the value of the standard deviation to the Gaussian blur function. A larger `<standard-deviation>` value creates a larger and more blurred shadow. Negative values for `<standard-deviation>` are not allowed.

Formal syntax
-------------
```

<drop-shadow()> =   
  drop-shadow( [ <color>? && <length>{2,3} ] )    
  
```

Examples
--------

### Setting a drop shadow


```html
<div>drop-shadow(16px 16px)</div>
<div>drop-shadow(16px 16px red)</div>
<div>drop-shadow(red 1rem 1rem 10px)</div>
<div>drop-shadow(-16px -16px red)</div>
```



```css
div {
  display: inline-block;
  margin: 0 0.5rem 2rem 1rem;
  padding: 0.5rem;
  height: 100px;
  width: 190px;
  vertical-align: top;
  background-color: #222;

  color: lime;
}

div:nth-child(1) {
  filter: drop-shadow(16px 16px);
}

div:nth-child(2) {
  filter: drop-shadow(16px 16px red);
}

div:nth-child(3) {
  filter: drop-shadow(red 1rem 1rem 10px);
}

div:nth-child(4) {
  filter: drop-shadow(-16px -6px red);
}
```


In the absence of a `<color>` value in the `drop-shadow()` function in the first box, the shadow uses the value of the `color` property from the element (`lime`). The second and third shadows illustrate that the length and color values can be specified in any order. The third shadow shows the blurring effect when a third `<length>` value is specified. The fourth shadow uses negative offsets which shifts shadow to the left and top.

Specifications
--------------

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-drop-shadow |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

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