mask-image
Uses an image or a gradient as a mask: where the mask is opaque the element is visible, where it is transparent the element disappears.
Syntax
mask-image: linear-gradient(black, transparent);Values
| Parameter | Type | Description |
|---|---|---|
| gradient | image | The most common mask: `linear-gradient()` or `radial-gradient()` from opaque to transparent. |
| url() | image | An image (PNG with transparency or SVG) whose shape cuts out the element. |
| none | keyword | The default: no mask. |
Examples
A photo that fades out at the bottom:
<style>
img { mask-image: linear-gradient(black 50%, transparent); }
</style>
<img src="/media/photo-400x250.jpg" alt="A latte" width="400" height="250">A round soft-edged vignette:
<style>
img { mask-image: radial-gradient(circle, black 40%, transparent 70%); }
</style>
<img src="/media/photo-200x200.jpg" alt="A photo" width="200" height="200">Notes
Only the transparency of the mask matters, not its color. Unlike clip-path, a mask can have soft edges. Masks work like backgrounds: there are also mask-size, mask-repeat, mask-position and the shorthand mask. Unprefixed in all current browsers since 2023; older Chrome and Safari need -webkit-mask-image.
See also
- clip-path — Clips an element to a shape: only the part inside the shape stays visible.
- linear-gradient() — A smooth transition between colors along a straight line — used as a background image.
- radial-gradient() — A transition between colors from a center outwards.
- opacity — The transparency of the whole element together with its content.
In the tutorial
- Clipping and masks — How to give an element any shape — clip-path with a circle, an ellipse and a polygon, a smooth fade with mask-image and a gradient, and text wrapping around a shape with shape-outside.