mask-position
The mask-position CSS property sets the initial position, relative to the mask position layer set by mask-origin, for each defined mask image.
/* 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: unset;
Syntax
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 | center |
|---|---|
| Applies to | all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements |
| Inherited | no |
| Percentages | refer to size of mask painting area minus size of mask layer image (see the text for background-position) |
| Computed value | Consists 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 of simple list of length, percentage, or calc |
Formal syntax
<position>#where
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where
<length-percentage> = <length> | <percentage>
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.
Specifications
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask-position |
Browser compatibility
BCD tables only load in the browser