This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The mask-position
CSS property sets the initial position, relative to the mask position layer defined 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; /* values */ mask-position: 25% 75%; /* values */ mask-position: 0px 0px; mask-position: 1cm 2cm; mask-position: 10ch 8em; /* Multiple values */ mask-position: 0px 0px, center; /* Global values */ mask-position: inherit; mask-position: initial; mask-position: unset;
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 ) |
Media | visual |
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 |
Canonical order | per grammar |
Syntax
One or more <position>
values, separated by commas.
Values
<position>
- Is a
<position>
, that is 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 syntax
<position>#where
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
where
<length-percentage> = <length> | <percentage>
Example
CSS
#wrapper { border: 1px solid black; width: 250px; height: 250px; } #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: no-repeat; mask-position: top right; /* Can be changed in the live sample */ margin-bottom: 10px; }
HTML
<div id="wrapper"> <div id="masked"> </div> </div> <select id="maskPosition"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> <option value="top right" selected>top right</option> <option value="center center">center center</option> <option value="bottom left">bottom left</option> <option value="10px 20px">10px 20px</option> <option value="60% 20%">60% 20%</option> </select>
JavaScript
var maskPosition = document.getElementById("maskPosition"); maskPosition.addEventListener("change", function (evt) { document.getElementById("masked").style.maskPosition = evt.target.value; });
Specifications
Specification | Status | Comment |
---|---|---|
CSS Masking Module Level 1 The definition of 'mask-position' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1 -webkit- | ? | 53 | ? | ? | 4 -webkit- |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | ? | ? | ? | 53 | ? | ? | ? |