CSS mask-position Property

Definition and Usage

The mask-position property sets the starting place of each mask-image inside the area chosen by mask-origin. One value, two values, or a four-value edge offset can place the mask. With several mask layers, list positions with commas in the same order.

The initial value is 0% 0% (top left). The property is not inherited. Pair it with mask-repeat: no-repeat and a fixed mask-size when you want to see one placed mask instead of a tile.

CSS Syntax

One value implies center for the other axis. With two lengths or percentages, the first is horizontal and the second is vertical. Separate multiple mask layers with commas.

Property Values

How to Use mask-position

Give the element a mask, keep one copy visible, then set the position.

1. Set a mask-image on the element. Without a mask, there is nothing to place.
2. Give the element a visible size and a background you can see through the mask.
3. Use mask-repeat: no-repeat and a fixed mask-size so one mask shape is easy to see.
4. Set mask-position with a keyword, a pair of values, or a four-value edge offset. It is not inherited.

Live Preview

One circular mask over a gradient. Change mask-position and watch where the revealed circle sits.

CSS Examples

Each snippet adds only what mask-position needs: a mask, a sized box, and no-repeat so the shape is clear. Use Try It Yourself for a live editor.

<style>
  div {
    height: 160px;
    border: 1px solid #ccc;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    mask-image: radial-gradient(circle, #000 0 28px, transparent 29px);
    mask-repeat: no-repeat;
    mask-size: 72px 72px;
    mask-position: center;
  }
</style>

<div></div>

<style>
  div {
    height: 160px;
    border: 1px solid #ccc;
    background: linear-gradient(135deg, #059669, #0d9488);
    mask-image: radial-gradient(circle, #000 0 28px, transparent 29px);
    mask-repeat: no-repeat;
    mask-size: 72px 72px;
    mask-position: 25% 75%;
  }
</style>

<div></div>

<style>
  div {
    height: 160px;
    border: 1px solid #ccc;
    background: linear-gradient(135deg, #ea580c, #db2777);
    mask-image: radial-gradient(circle, #000 0 28px, transparent 29px);
    mask-repeat: no-repeat;
    mask-size: 72px 72px;
    mask-position: bottom 10px right 20px;
  }
</style>

<div></div>

Key Takeaways