# CSS: “filter”: X is not a “drop-shadow” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-filter-x-is-not-a-drop-shadow-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

An invalid value was passed to the `drop-shadow()` function inside the CSS `filter` property.

The `drop-shadow()` function accepts a shadow definition similar to `box-shadow`, but with some restrictions. It takes two or three length values (offset-x, offset-y, and an optional blur-radius), plus an optional color. Unlike `box-shadow`, it does not accept a spread-radius value or the `inset` keyword.

The correct syntax is:

```
filter: drop-shadow(offset-x offset-y blur-radius color);
```

Each parameter has specific requirements:

- `offset-x` and `offset-y` are required length values (e.g., `2px`, `0.5em`).
- `blur-radius` is optional and must be a non-negative length. Negative values are not allowed.
- `color` is optional. If omitted, the browser uses the element's `color` property value.

Common mistakes that trigger this error include adding a spread-radius (a fourth length value), using the `inset` keyword, or passing a malformed color value.

## Examples

This is invalid because `drop-shadow()` does not support a spread-radius (the `5px` fourth length value):

```html
<div style="filter: drop-shadow(4px 4px 10px 5px red);">
  Shadow content
</div>
```

Remove the spread-radius to fix it:

```html
<div style="filter: drop-shadow(4px 4px 10px red);">
  Shadow content
</div>
```