HTML Guide for mask

CSS: “mask”: Too many values or values are not recognized.

css
mask

The specified CSS mask has incorrect or unrecognized values. Ensure that the mask property is used correctly according to the CSS specifications.

The mask CSS shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.

For example, the mask-image CSS property sets the image that is used as mask layer for an element. By default this means the alpha channel of the mask image will be multiplied with the alpha channel of the element, as in thie example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
  <style>
  .masked {
    width: 100px;
    height: 100px;
    background-color: #8cffb0;
    -webkit-mask-image: url(sun.svg);
    mask-image: url(sun.svg);
  }
  </style>
</head>
<body>
  <div class="masked"></div>
</body>
</html>

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

CSS
mask

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.