HTML Guides for drop-shadow

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

<divstyle="filter:drop-shadow(4px4px10px5px red);">

Shadow content

</div>

Remove the spread-radius to fix it:

<divstyle="filter:drop-shadow(4px4px10px red);">

Shadow content

</div>