CSS mask-origin Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The mask-origin property determines which reference box of an element is used as the origin for positioning and sizing the mask image(s). In practice this means it selects the rectangle within the element that the browser treats as the “frame” for placing and repeating whatever mask is provided via mask-image. Changing that reference shifts where mask artwork sits relative to the element’s content, padding and border, so the same mask resource can produce different visual results depending on which box is chosen as the origin.

Because mask-origin only changes the coordinate system for the mask, it directly affects how properties that control mask placement behave. For example, it alters the anchor used by mask-position and the box within which mask-size scales the mask. It also interacts with how the mask is clipped if you use mask-clip, because the chosen origin can include or exclude areas such as the element’s border from the masked region.

When authoring masks, consider mask-origin as a layout knob rather than a rendering filter—its primary job is to change alignment and scaling context. That makes it useful when you want a mask to line up with background artwork or the element’s padding edge instead of its outer border, or when multiple elements share the same mask image but require different visual alignments. Remember that the same mask image can look like it is moved, enlarged or cropped simply by changing the origin without altering the image itself.

A common comparison is with properties that control other kinds of box-relative painting: background-origin behaves similarly for background images, while geometric clipping like clip-path is a different mechanism that actually discards parts of the rendering rather than changing the mask’s coordinate system. In short, use mask-origin when you need fine control over where and how a mask is referenced against an element’s box model; pairing it thoughtfully with the mask-position/size/clip controls yields predictable, reusable masking results.

Definition

Initial value: border-box
Applies to: all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Inherited: no
Computed value: as specified
Animatable: yes
JavaScript syntax: object.style.maskOrigin

Syntax

mask-origin: <box>;

Values

<box>
The <box> can be one of the following keywords:
- border-box → Positions the mask relative to the element’s border box.
- padding-box → Positions the mask relative to the element’s padding box.
- content-box → Positions the mask relative to the element’s content box.
- fill-box → Uses the bounding box of the element’s content, ignoring stroke and padding.
- stroke-box → Positions the mask relative to the element’s stroke (mainly for SVG shapes).

Example

HTML

<div class='container'>

  <div class='box border'>

    <div class='inner'>border-box</div>

  </div>



  <div class='box padding'>

    <div class='inner'>padding-box</div>

  </div>



  <div class='box content'>

    <div class='inner'>content-box</div>

  </div>

</div>

CSS

/* Layout */
.container {
  display: flex;
  gap: 20px;
  padding: 24px;
  background: #f4f4f8;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Common box appearance */
.box {
  width: 180px;
  height: 180px;
  border: 12px solid #2d3748;
  padding: 18px;
  box-sizing: border-box;
  border-radius: 8px;
  background: linear-gradient(135deg, #7bdff6 0%, #6b8cff 100%);
  color: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;

  /* Mask: a circular "reveal" anchored at the top-left corner
     mask-origin changes which box (border/padding/content) the mask is positioned against */
  -webkit-mask-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,1) 24%, rgba(0,0,0,0) 50%);
  mask-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,1) 24%, rgba(0,0,0,0) 50%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

/* Different mask-origin values */
.box.border {
  -webkit-mask-origin: border-box;
  mask-origin: border-box;
}

.box.padding {
  -webkit-mask-origin: padding-box;
  mask-origin: padding-box;
}

.box.content {
  -webkit-mask-origin: content-box;
  mask-origin: content-box;
}

/* Inner label */
.inner {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(0,0,0,0.18);
  padding: 6px 10px;
  border-radius: 4px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS mask-origin property. Hover over a browser icon to see the version that first introduced support for this CSS property.