Effects
mask-position
mask-position sets where a mask image sits. It takes the same values as background-position: the horizontal then the vertical position, with keywords, lengths or percentages.
Syntax
<position>#Preview
Presets
Drag the bottom-right corner to resize
Code
.box {
background: linear-gradient(
135deg,
#88d1c7,
#77a7d7,
#eaac3a
);
mask-image: url(/mask-star.svg);
mask-repeat: no-repeat;
mask-position: 25% 75%;
}Controls
Click or drag inside the box to move the center
Horizontal
Vertical
About
Percentages line up matching points
A percentage means put the point X% across the image on the point X% across the area. 0% lines up the left edges and 100% the right edges. A length such as 20px offsets the image’s top-left corner from the area’s top-left corner.
Ways to write it
- With one value, the other becomes
center. - Keywords can go in either order (
top rightequalsright top). - Follow a keyword with a length, as in
right 20px bottom 10px, to measure from that edge. The controls here don’t cover it, but you can type it into the code.
Watch out
- The initial value is
0% 0%(top left). When the image repeats, this position anchors the tiling. - The area it is measured against comes from
mask-origin, which by default reaches the outer edge of the border. Backgrounds measure up to the padding, so on an element with a border the same value lands in a slightly different place. - With
no-repeat, the element disappears outside the image, so moving the position moves the visible part. - Chrome and Edge support the name without
-webkit-from version 120, and Safari from 15.4. For older browsers, write-webkit-mask-position. - The preview here masks the box with a star image (96×96) that doesn’t repeat.