✂️ Mastering mask-clip in CSS

📌 What Is mask-clip?

The mask-clip property defines which region of an element the mask is allowed to affect. In other words, it determines the clipping area where the mask is applied.
It works similarly to background-clip, but for masks. This helps you control whether the mask covers the border area, padding area, or only the content area.

>>“mask-clip decides where the mask can ‘paint’ — border, padding, or just content.”

🧩 Basic Syntax

Syntax

mask-clip: border-box | padding-box | content-box | no-clip;

✔ The value determines which region the mask is clipped to
✔ Each mask layer can have its own clip rule if multiple masks are used

🎯 Available Values

ValueArea AffectedDescription
border-boxBorder + padding + contentMask extends over the full element box
padding-boxPadding + contentMask ignores border area
content-boxOnly contentMask clipped tightly to content area
no-clipMask not clipped at allMask can extend beyond element bounds

Note

mask-origin determines where the mask is positioned.
mask-clip determines how much area the mask can cover.

🧪 Example: mask-clip = border-box (Default)

border-box example

.box {
  mask-image: url(mask.svg);
  mask-clip: border-box;
}

✔ Mask covers the entire element, including border, padding, and content.

🧪 Example: mask-clip = padding-box

padding-box example

.inner-mask {
  border: 10px solid red;
  padding: 30px;
  mask-image: url(shape.png);
  mask-clip: padding-box;
}

✔ Mask is clipped inside the padding area
✔ Border is never affected by the mask

🧪 Example: mask-clip = content-box

content-box example

.content-mask {
  padding: 40px;
  mask-image: url(mask.png);
  mask-clip: content-box;
}

✔ Mask appears only on the inner content area
✔ Great for masking text or images inside padded boxes

🧪 Example: mask-clip = no-clip

no-clip example

.free-mask {
  mask-image: radial-gradient(circle, white 60%, transparent);
  mask-clip: no-clip;
}

✔ Mask is not restricted by element bounds
✔ Can extend outward beyond padding & border
✔ Useful for glow or vignette-like effects

🎨 Combining mask-clip + mask-origin

mask-clip + mask-origin

.combo {
  mask-image: url(shape.svg);
  mask-origin: padding-box;
  mask-clip: content-box;
}

✔ Mask starts at padding-box
✔ But is clipped to content-box
✔ Great for precise masking zones

🌈 Example: Multiple Masks with Different mask-clip

Multiple masks

.multi {
  mask-image: url(mask1.png), url(mask2.png);
  mask-clip: border-box, content-box;
}

✔ First mask covers entire element
✔ Second mask covers only content
✔ Useful for layered stencil effects

🔥 Advanced Interaction: mask-clip + mask-size

Spotlight reveal

.spotlight {
  mask-image: radial-gradient(circle, white 50%, transparent);
  mask-size: 200px 200px;
  mask-origin: content-box;
  mask-clip: content-box;
}

✔ Spotlight remains confined to content area
✔ Common in reveal animations and focused highlights

🛠️ Best Practices

  • Use content-box for masking only inner content
  • Use padding-box when you want borders to remain unaffected
  • Use no-clip for dramatic visual effects that extend outward
  • Pair with mask-origin for precise control
  • Perfect for UI shine effects, cutouts, and creative patterns

⚠️ Browser Support

  • ✔ Chrome
  • ✔ Safari
  • ✔ Edge
  • ⚠️ Firefox requires -webkit-mask-clip

Note

Always include both mask-clip and -webkit-mask-clip for maximum compatibility.

🔍 Debugging Tips

  • If mask cuts off unexpectedly → check mask-clip
  • If mask doesn’t align → adjust mask-origin or mask-size
  • Use DevTools to visualize border/padding/content boxes
  • Make sure mask image has transparency for visible effects

🔗 Helpful Resources

>>“mask-clip gives you the power to control exactly where your mask applies — no more, no less.” ✂️✨