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