# CSS Masking

CSS Masking provides two means for partially or fully hiding portions of visual elements: masking and clipping. While `clip-path` creates a sharp path, `mask` allows for soft edges and transparency levels using images or gradients.

## 1. The `mask-image` Property

The `mask-image` property sets the image that is used as a mask layer for an element. By default, the alpha channel of the mask image is used: opaque parts of the mask show the element, transparent parts hide it.

```css
.masked-element {
  /* Use an image */
  mask-image: url(mask.png);
  
  /* Use a gradient */
  mask-image: linear-gradient(to bottom, black, transparent);
}
```

*   **Opaque (Black/White/Color):** Content is visible.
*   **Transparent:** Content is hidden.
*   **Semi-transparent:** Content is semi-transparent.

## 2. Standard Properties

CSS masking properties mirror CSS background properties.

*   **`mask-repeat`**: `repeat`, `no-repeat`, `repeat-x`, `repeat-y`.
*   **`mask-position`**: `center`, `top left`, `10px 50%`.
*   **`mask-size`**: `cover`, `contain`, `100%`.
*   **`mask-origin`**: `border-box`, `content-box`, `padding-box`.

```css
.mask {
  mask-image: url(star.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
```

## 3. `mask-mode`

Defines whether the mask reference is treated as a luminance mask or an alpha mask.

*   **`alpha`** (Default): Uses the alpha channel (transparency) of the image.
*   **`luminance`**: Uses the brightness of the image. White = visible, Black = hidden. Useful for JPG masks.

```css
mask-mode: luminance;
```

## 4. `mask-composite`

When you have multiple mask layers, `mask-composite` defines how they are combined.

*   `add`: Source is placed over the destination.
*   `subtract`: Source is placed where it falls outside of the destination.
*   `intersect`: Parts of source that overlap with destination.
*   `exclude`: Non-overlapping regions.

## 5. Vendor Prefixes

CSS Masking still often requires the `-webkit-` prefix for compatibility (especially in Chrome/Safari).

[[programming/css/css]]
[[programming/css/clip-path]]
[[programming/css/colors-and-backgrounds]]