HTML Guides for filter

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>

The CSS filter property accepts a specific set of filter functions defined in the CSS Filter Effects Module. When the validator encounters a value it doesn't recognize — such as the legacy IE progid:DXImageTransform.Microsoft. syntax, a made-up function name, or an incorrectly formatted value — it flags it as invalid.

The standard filter functions are: blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), and url() (for referencing SVG filters). The property also accepts the keyword none. Any value outside this set will trigger the validation error.

Why this matters

Using non-standard filter values creates several problems:

• Browser compatibility: Legacy or proprietary filter syntax (such as Microsoft's filter: alpha(opacity=50) or filter: FlipH) only works in old versions of Internet Explorer and is ignored by all modern browsers.
• Standards compliance: Invalid CSS can cause parsers to discard the entire declaration or even the surrounding rule block, potentially breaking other styles.
• Future-proofing: Non-standard values may stop working entirely as browsers drop legacy support, leaving your design broken with no fallback.

How to fix it

1. Identify the invalid value in the error message.
2. Determine what visual effect you're trying to achieve.
3. Replace the invalid value with the corresponding standard CSS filter function.
4. If you're using legacy IE opacity filters, switch to the standard opacity property instead.

Examples

❌ Invalid: Legacy Microsoft filter syntax

<style>

.overlay {

filter: alpha(opacity=50);

}

</style>

✅ Fixed: Use standard opacity property

<style>

.overlay {

opacity: 0.5;

}

</style>

❌ Invalid: Misspelled or non-existent filter function

<style>

.photo {

filter: gray();

}

</style>

✅ Fixed: Use the correct grayscale() function

<style>

.photo {

filter: grayscale(100%);

}

</style>

❌ Invalid: Vendor-prefixed or proprietary value

<style>

.card {

filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=5);

}

</style>

✅ Fixed: Use the standard blur() function

<style>

.card {

filter: blur(5px);

}

</style>

❌ Invalid: Bare value without a function

<style>

.image {

filter: 50%;

}

</style>

✅ Fixed: Wrap the value in the appropriate function

<style>

.image {

filter: brightness(50%);

}

</style>

Combining multiple filters

You can chain multiple standard filter functions in a single declaration by separating them with spaces:

<style>

.hero-image {

filter: contrast(120%) brightness(90%) blur(1px);

}

</style>

If none of the built-in filter functions achieve the effect you need, you can reference a custom SVG filter using the url() function, which is also a valid filter value:

<svg xmlns="http://www.w3.org/2000/svg" class="visually-hidden">

<filter id="custom-effect">

<feColorMatrix type="matrix" values="0.3 0.3 0.3 0 0

0.3 0.3 0.3 0 0

0.3 0.3 0.3 0 0

0 0 0 1 0"/>

</filter>

</svg>

<style>

.filtered {

filter: url(#custom-effect);

}

</style>