HTML Guide for mask-image

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.