mask-position

Sets the initial position of the mask image within the masking area. It works exactly like 'background-position'.

Quick example

.pushed-mask {
  /* Positions the mask 20px from the left and 50px from the top */
  mask-position: 20px 50px;
}

Quick facts

Initial value
0% 0%
Inherited
No
Applies to
all elements and SVG container elements
Animation type
repeatableList

mask-position Browser Support

Widely availableSince 202388% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.

Safe to use without fallbacks.

120+
53+
15.4+
120+
ESC