CSS mask-origin

The mask-origin property specifies the positioning area of a CSS mask. By default, the mask origin is set to border-box, which means the mask is positioned relative to the border-box of the element. However, you can change this positioning by using the mask-origin property.

There are three possible values for the mask-origin property:

  1. border-box: The mask is positioned relative to the border-box of the element (default).
  2. padding-box: The mask is positioned relative to the padding-box of the element.
  3. content-box: The mask is positioned relative to the content-box of the element.

Let's see some examples to better understand how the mask-origin property works:

Result: 

    .mask-example {
      width: 200px;
      height: 100px;
      border: 1px solid #333;
      background: url('mask-image.png');
      -webkit-mask-image: url('mask-image.png');
      mask-origin: border-box;
    }

In this example, the mask-origin property is set to border-box, so the mask is positioned relative to the border-box of the element.

Result: 

    .mask-example {
      width: 200px;
      height: 100px;
      border: 1px solid #333;
      padding: 20px;
      background: url('mask-image.png');
      -webkit-mask-image: url('mask-image.png');
      mask-origin: padding-box;
    }

In this example, the mask-origin property is set to padding-box, so the mask is positioned relative to the padding-box of the element.

Result: 

    .mask-example {
      width: 200px;
      height: 100px;
      border: 1px solid #333;
      padding: 20px;
      background: url('mask-image.png');
      -webkit-mask-image: url('mask-image.png');
      mask-origin: content-box;
    }

In this example, the mask-origin property is set to content-box, so the mask is positioned relative to the content-box of the element.