Skip to main content

HTML Guide

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

Invalid values have been used in the mask CSS property.

The mask property in CSS defines a graphical mask to display parts of an element, often using images, gradients, or SVG, and only accepts certain syntaxes and values. If the value provided is not supported or misspelled, validators and browsers will reject it. Valid values include none, a URL to an image resource, or supported mask functions like linear-gradient(), among others.

For example, the following usage is incorrect and will cause the validator error:

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

Valid mask usages include:

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

Or using none:

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

When using mask, ensure you provide a valid value per the CSS Masking standard, such as a URL to an SVG or image, or the keyword none. Avoid using arbitrary or unsupported keywords.

Learn more:

Related W3C validator issues