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

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

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

Remove the spread-radius to fix it:

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

Learn more:

MDN Reference

CSS filter property

→

MDN Reference

CSS drop-shadow() filter function

→

MDN Reference

CSS filter-function

→