mask-clip

Definition

The mask-clip CSS property defines the area of an element where the mask image will be visible. This property applies to an element that has a mask image applied to it using the mask-image property. The mask-clip property allows you to control which parts of the element will be visible through the mask image, by defining the shape and size of the mask.

Examples

Using mask-clip with a rectangle:

.element {
  mask-image: url('mask-image.png');
  mask-clip: border-box;
}

Using mask-clip with a circle:

.element {
  mask-image: url('mask-image.png');
  mask-clip: circle(50% at center);
}

Using mask-clip with an ellipse:

.element {
  mask-image: url('mask-image.png');
  mask-clip: ellipse(50% 70% at center);
}

Values

Best Practices

• Use the border-box value as a default. It is the most commonly used value and will usually provide the desired result.
• Use shapes with caution. Shapes can be complex and difficult to manage, so use them only when necessary.
• Use the no-clip value with care. This will allow the mask image to be visible outside of the element, which can lead to unexpected results.
• Use the padding-box value if you want the mask image to be visible only within the padding area of the element.
• Experiment with different values and shapes to achieve the desired result.

Browser Compatibility