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.
Syntax
css
/* 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 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 | a repeatable list |
Formal syntax
mask-position =
<position>#
<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<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
| desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
mask-position | |||||||||||