CSS mask-position

The mask-position property in CSS allows you to specify the position of the mask image used in CSS masking. This property defines the position of the mask image relative to its container.

The syntax for the mask-position property is:

mask-position: x-position y-position;

The x-position and y-position values can be specified using pixels, percentages, or keywords like center, top, bottom, left, and right.

Here is an example of how to use the mask-position property:

Result:

In the example above, the mask image is positioned at the center of the container element.