# CSS: “mask”: X is not a “mask” value.

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

The `mask` CSS shorthand property allows you to partially or fully hide portions of an element by applying a graphical mask. It is a shorthand for several sub-properties including `mask-image`, `mask-mode`, `mask-repeat`, `mask-position`, `mask-clip`, `mask-origin`, `mask-size`, and `mask-composite`. Because it's a shorthand, each value you provide must correspond to one of these sub-properties' accepted values. The validator triggers this error when it encounters a value that doesn't fit any of them — for example, an arbitrary keyword, a misspelled function name, or an unsupported syntax.

Common causes of this error include:

- **Arbitrary keywords** — Using made-up names like `star-shape` or `circle-mask` that aren't valid CSS values.
- **Misspelled functions or keywords** — Typos such as `lnear-gradient()` instead of `linear-gradient()`, or `noen` instead of `none`.
- **Browser-prefixed values without the standard value** — Using `-webkit-mask` syntax or values that don't align with the standard `mask` property.
- **Invalid shorthand combinations** — Providing sub-property values in an order or combination the shorthand doesn't accept.
- **Missing `url()` wrapper** — Referencing an image file path directly without wrapping it in the `url()` function.

This matters for standards compliance because browsers may silently ignore invalid `mask` values, resulting in the mask not being applied at all. Your design could look completely different than intended, and the failure may be hard to debug without validation.

### Valid `mask` values

The `mask` property accepts one or more comma-separated mask layers. Each layer can include:

- **`none`** — No mask is applied.
- **`url()`** — A reference to an SVG mask element or an image file (e.g., `url(mask.svg)`, `url(mask.png)`).
- **CSS image functions** — Such as `linear-gradient()`, `radial-gradient()`, `conic-gradient()`, `image()`, etc.
- **Geometry box keywords** (for `mask-clip` / `mask-origin`) — Such as `content-box`, `padding-box`, `border-box`, `fill-box`, `stroke-box`, `view-box`.
- **Compositing keywords** (for `mask-composite`) — Such as `add`, `subtract`, `intersect`, `exclude`.

## Examples

### Incorrect: arbitrary keyword as a mask value

```html
<div style="mask: star-shape;">
  Masked Content
</div>
```

The value `star-shape` is not a recognized `mask` value and will be rejected by the validator.

### Incorrect: missing `url()` function

```html
<div style="mask: star.svg;">
  Masked Content
</div>
```

A bare file path is not valid. Image references must be wrapped in the `url()` function.

### Correct: using `url()` to reference a mask image

```html
<div style="mask: url(star.svg);">
  Masked Content
</div>
```

### Correct: using `none` to explicitly disable masking

```html
<div style="mask: none;">
  No Mask Applied
</div>
```

### Correct: using a gradient as a mask

```html
<div style="mask: linear-gradient(to right, transparent, black);">
  Fading Content
</div>
```

### Correct: combining multiple shorthand values

```html
<div style="mask: url(mask.png) no-repeat center / contain;">
  Masked Content
</div>
```

This sets the mask image, repeat behavior, position, and size in a single shorthand declaration.

### Correct: multiple mask layers

```html
<div style="mask: url(shape.svg) no-repeat, linear-gradient(to bottom, black, transparent);">
  Multi-layer Mask
</div>
```

When fixing this error, double-check your value against the [CSS Masking specification on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/mask). If you're using vendor-prefixed versions like `-webkit-mask`, also ensure the standard `mask` property is present with valid values for forward compatibility.