📌 What Is mask-position?

The mask-position property controls where the mask image is placed inside the element’s box — similar to how background-position works for backgrounds.
It defines the starting position of the mask relative to the element, allowing you to align masks precisely for creative cutouts, text reveals, sticker shapes, UI highlights, and more. 🎨✨

🧩 Basic Syntax

mask-position: <position> | <x-pos> <y-pos>;

mask-position: center;
mask-position: left top;
mask-position: 20px 40px;
mask-position: 50% 50%;

✔ You can use keywords, percentages, or length values
✔ Works similarly to background-position

🎯 Accepted Values

🧪 Example: Position Mask in the Center

.circle-cutout {
  mask-image: url(circle.png);
  mask-position: center;
  mask-repeat: no-repeat;
}

✔ The mask is perfectly centered over the element.

🧪 Example: Offset Mask to Top-Left

.shape {
  mask-image: url(shape.png);
  mask-position: left top;
}

✔ Great when aligning masks with decorative shapes.

🧪 Example: Exact Pixel Position

.icon {
  mask-image: url(star.svg);
  mask-position: 10px 20px;
}

✔ Useful for precise stencil placement.

🧪 Example: Center Horizontally, Bottom Vertically

.fade {
  mask-image: linear-gradient(to top, transparent, black);
  mask-position: center bottom;
}

✔ Perfect for fade-out overlays at top or bottom.

🌈 Using Percentages

.spotlight {
  mask-image: radial-gradient(circle, white 40%, transparent 60%);
  mask-position: 70% 30%;
}

✔ Moves the spotlight to the upper-right area — great for reveal effects.

🎨 Combining mask-position + mask-size

.pattern {
  mask-image: url(tile.png);
  mask-size: 50px 50px;
  mask-position: 10px 10px;
  mask-repeat: repeat;
}

✔ Precise control for tiled mask patterns.

🔥 Example: Animated Mask Movement

@keyframes moveMask {
  to { mask-position: 100% 0%; }
}

.moving {
  mask-image: linear-gradient(90deg, transparent, white, transparent);
  mask-size: 200% 100%;
  animation: moveMask 3s infinite linear;
}

✔ Creates a smooth scanning or shimmering effect.

🧠 Multiple Masks with Different Positions

.multi {
  mask-image: url(mask1.png), url(mask2.png);
  mask-position: 0 0, center;
}

✔ First mask at top-left
✔ Second mask at center

⚠️ Browser Support

🔍 Debugging Tips

🔗 Helpful Resources