Skip to main content

HTML Guide

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

mask-image only accepts specific values such as none, a valid <image>, or a supported CSS gradient value.

The mask-image CSS property is used to specify an image to use as a mask layer for an element. Acceptable values for mask-image are none, a supported URL (using url()), or a CSS gradient (such as linear-gradient() or radial-gradient()). Passing an invalid value (like a random string or unsupported function) will trigger a validation error.

Common mistakes include:

  • Typing errors in the value
  • Using unsupported keywords or formats
  • Forgetting to wrap URLs in url()

Examples of correct usage:

<div style="mask-image: none;">
  <!-- Masking is disabled -->
</div>
<div style="mask-image: url('mask.png');">
  <!-- Uses an external image as a mask -->
</div>
<div style="mask-image: linear-gradient(to right, transparent, black);">
  <!-- Uses a CSS gradient as a mask -->
</div>

Always use a valid image, gradient, or none as the value for mask-image to resolve the validator issue.

Learn more:

Related W3C validator issues