The mask-position CSS property sets the initial position, relative to the mask position layer set by mask-origin, for each defined mask image.
Syntax
/* Keyword values */ mask-position: top; mask-position: bottom; mask-position: left; mask-position: right; mask-position: center; /* <position> values */ mask-position: 25% 75%; mask-position: 0px 0px; mask-position: 10% 8em; /* Multiple values */ mask-position: top right; mask-position: 1rem 1rem, center; /* Global values */ mask-position: inherit; mask-position: initial; mask-position: revert; mask-position: revert-layer; mask-position: unset;
One or more <position> values, separated by commas.
Values
<position>-
One to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.
Formal definition
| Initial value | 0% 0% |
|---|---|
| Applies to | All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element |
| Inherited | no |
| Computed value | Consisting of: two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage. |
| Animation type | repeatable list |
Formal syntax
<position>#
Examples
Setting mask position
Change the mask-position value to any of the allowed values detailed above.
If viewing the example in a Chromium-based browser change the value of -webkit-mask-position.