# CSS: “filter”: "X" is not a “filter” value.

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

The CSS `filter` property accepts a specific set of filter functions defined in the [CSS Filter Effects Module](https://www.w3.org/TR/filter-effects-1/). 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

```html
<style>
  .overlay {
    filter: alpha(opacity=50);
  }
</style>
```

### ✅ Fixed: Use standard `opacity` property

```html
<style>
  .overlay {
    opacity: 0.5;
  }
</style>
```

### ❌ Invalid: Misspelled or non-existent filter function

```html
<style>
  .photo {
    filter: gray();
  }
</style>
```

### ✅ Fixed: Use the correct `grayscale()` function

```html
<style>
  .photo {
    filter: grayscale(100%);
  }
</style>
```

### ❌ Invalid: Vendor-prefixed or proprietary value

```html
<style>
  .card {
    filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=5);
  }
</style>
```

### ✅ Fixed: Use the standard `blur()` function

```html
<style>
  .card {
    filter: blur(5px);
  }
</style>
```

### ❌ Invalid: Bare value without a function

```html
<style>
  .image {
    filter: 50%;
  }
</style>
```

### ✅ Fixed: Wrap the value in the appropriate function

```html
<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:

```html
<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:

```html
<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>
```