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 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: unset;

Initial valuecenter
Applies toall elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Percentagesrefer to size of mask painting area minus size of mask layer image (see the text for background-position)
Computed valueConsists 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 typerepeatable list of simple list of length, percentage, or calc
Canonical orderper grammar


One or more <position> values, separated by commas.


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> = [ [ 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>



#wrapper {
  border: 1px solid black;
  width: 250px;
  height: 250px;

#masked {
  width: 250px;
  height: 250px;
  background: blue linear-gradient(red, blue);
  mask-image: url(;
  mask-repeat: no-repeat;
  mask-position: top right; /* Can be changed in the live sample */
  margin-bottom: 10px;


Specification Status Comment
CSS Masking Module Level 1
The definition of 'mask-position' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Chrome Full support 1
Full support 1
Prefixed Requires the vendor prefix: -webkit-
Edge Full support 18Firefox Full support 53IE ? Opera ? Safari Full support 4
Full support 4
Prefixed Requires the vendor prefix: -webkit-
WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 53Opera Android ? Safari iOS ? Samsung Internet Android ?


Full support  
Full support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Document Tags and Contributors

Contributors to this page: ddbeck, mfluehr, fscholz, wbamberg, Sebastianz, chrisdavidmills, teoli
Last updated by: ddbeck,