CSS Reference Property

mask-position

The mask-position property specifies the initial position (after any resizing) of a mask layer image within the mask positioning area.

Trivia & Notes

The mask-position property works and takes the same values as the background-position property.

Official Syntax

  • Syntax:

    mask-position: <position>#
                           
  • Initial: center
  • Applies To: All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements
  • Animatable: as repeatable list of simple list of length, percentage, or calc

Notes

The hash tag (#) indicates that the property takes any number of mask positions. The list of mask positions is comma-separated.

When the mask-position property takes a list of comma-separated values, each value is applied to a corresponding mask layer image specified in the mask-image property (first value for the first image, second value for the second image, and so on).

Values

<position>
Specifies the position of the mask inside the mask positioning area.

A <position> can be defined by using offset keywords (top, left, bottom, right, and center), or relative <percentage> and <length> offset values.
These values describe the position of the element relative to its container’s edges (top edge and left edge).

Please refer to the <position> entry for more information and a list of possible <position> values.

Examples

The following example sets the position of two mask layer images. The position is applied after each image is sized using the mask-size property.

img {
    mask-image: url(first-mask.png), url(second-mask.png);
    mask-position: top left, bottom right;
    mask-size: 250px 250px, 300px, 200px;
}
                

Live Demo

The mask position in the following demo has been set to top left. Try changing the value of the mask-position property to see how the mask position changes, therefore changing the portion of the image that shows through it.

View this demo on the Codrops Playground

Browser Support

CSS Masks

Method of displaying part of an element, using a selected image as a mask

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • No
  • 53
  • No
  • No
  • No

Mobile / Tablet

  • No
  • No
  • No
  • No
  • 52

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Notes

This module, as you can see in the support table above, hasn’t been fully implemented in all browsers, so you’re probably not going to be able to use all features even in browsers that have implemented certain properties (for the time being).

In the meantime, you can check out this open source feature support table by Alan Greenblatt on GitHub. The purpose of this table is to provide some insight into what the current state of affairs is with various browser implementations of CSS Clipping and Masking features.

Further Reading

Written by

Last updated December 11, 2016 at 10:37 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.