HTML Guides for filter

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:

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

<filterid="custom-effect">

<feColorMatrixtype="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"/>

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>