CSS mask-clip Property

Description

The mask-clip property controls which box of an element — the area used for painting and sizing the mask image(s) — is used to clip the mask. In practice this means it selects the rectangle (for example, the content box, padding box, or border box) against which mask images are aligned and beyond which mask pixels are ignored. Because it changes only how the masking layer is applied and not the element’s layout, it determines which part of the element becomes transparent or opaque without changing box model dimensions or reflow.

When you create a mask with a mask-image, that image is positioned and possibly scaled relative to a reference box; mask-clip chooses which of the element’s boxes serves as that clipping frame. It works together with properties that control where the mask is placed and how it is sized, such as mask-origin, and creates effects analogous to what background-clip does for background painting. If you need a hard geometric clip instead of an alpha mask, consider the alternative approach using clip-path, which defines a vector clipping region rather than an image-based mask.

In practical use, mask-clip is important when you combine masks with borders, padding, or multiple mask layers: changing the reference box can move or crop mask artwork relative to visible content, which affects how gradients or images used as masks reveal the element. It’s commonly used to ensure a mask aligns to an element’s inner content area (so borders aren’t affected) or to make a mask cover the full border area for different visual effects. Because the property is about painting, it’s a powerful way to create non-rectangular visuals or soft transitions without altering DOM structure or layout.

Performance and maintainability tips: prefer simple mask images and avoid very large raster masks that must be repeatedly composited, and be explicit about which box you want to avoid accidental cropping when elements have varying border or padding sizes. Also keep in mind that mask stacking and compositing (when multiple mask layers are used) will interact with the chosen clip region for each layer, so designing masks with a consistent reference box makes results more predictable.

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.maskClip

Syntax

mask-clip: <box> | text | no-clip;

Values

<box>
1. border-box The mask is clipped to the border box of the element, meaning it includes the content, padding, and border area.
2. padding-box The mask is clipped to the padding box, excluding the border but including the padding and content.
3. content-box The mask is clipped to the content box, excluding padding and border.
4. fill-box (for SVG elements) The mask is clipped to the element’s fill area.
5. stroke-box (for SVG elements) The mask is clipped to the element’s stroke area.
6. view-box (for SVG elements) The mask is clipped to the entire SVG viewport.
textThe mask is applied only to the text content of the element. This is typically used with -webkit- prefix in WebKit browsers for text masking.
no-clipThe mask is not clipped, meaning it can extend beyond the element’s box.

Example

HTML

<div class="wrap">

    <h2>mask-clip examples</h2>

    <div class="row">

        <figure class="card border-box">

            <figcaption>mask-clip: border-box</figcaption>

        </figure>



        <figure class="card padding-box">

            <figcaption>mask-clip: padding-box</figcaption>

        </figure>



        <figure class="card content-box">

            <figcaption>mask-clip: content-box</figcaption>

        </figure>

    </div>



    <p class="note">A strong border and padding are used to show how the mask is clipped relative to the box.</p>

</div>

CSS

/* Basic page layout */
body {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: #f3f4f6;
    color: #0f172a;
    padding: 32px;
}

.wrap {
    max-width: 900px;
    margin: 0 auto;
}

h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.row {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

/* Card visual that will receive the mask */
.card {
    width: 200px;
    height: 200px;
    padding: 20px;              /* padding influences padding-box and content-box */
    border: 12px solid #111827; /* border influences border-box */
    border-radius: 12px;
    box-sizing: border-box;

    /* A colorful background so the mask effect is visible */
    background: conic-gradient(from 120deg, #06b6d4, #7c3aed, #ef4444, #f59e0b);

    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    position: relative;

    /* The mask image: a circular alpha gradient (opaque center, transparent edge) */
    -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 75%);
    mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 75%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Each example uses the same mask-image but different mask-clip values */
.card.border-box {
    -webkit-mask-clip: border-box;
    mask-clip: border-box;
}

.card.padding-box {
    -webkit-mask-clip: padding-box;
    mask-clip: padding-box;
}

.card.content-box {
    -webkit-mask-clip: content-box;
    mask-clip: content-box;
}

figcaption {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.1;
}

.note {
    margin-top: 16px;
    color: #475569;
    font-size: 13px;
}

Result

Editor

Browser Support

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