Verificação HTML: CSS: “mask”: X is not a “mask” value.

Sobre este problema HTML

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

<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

<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

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

Correct: using `none` to explicitly disable masking

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

Correct: using a gradient as a mask

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

Correct: combining multiple shorthand values

<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

<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. If you’re using vendor-prefixed versions like -webkit-mask, also ensure the standard mask property is present with valid values for forward compatibility.