What is mask-image
mask-image is a CSS property that applies a mask to an element. Think of it as an opacity map: transparent areas hide the element, semi-transparent areas partially show it, and opaque areas keep it visible.
It works well for fade-outs, softened edges, and reveal transitions in UI and motion design.
Steps
- Choose a mask type: linear, radial, or conic gradient.
- Adjust angle or position based on the selected type.
- Set opaque and transparent stops and check the live preview.
- Copy the generated CSS and paste it into your project.
Key Features
- Supports linear, radial, and conic gradient masks.
- Adjustable angle, position, and opacity stop ranges.
- Live preview for fast visual iteration.
- One-click CSS copy with
-webkitprefix for Safari support. - Runs locally in your browser.
FAQ
What is the difference between mask-image and clip-path
mask-image supports soft transparency and gradient transitions, while clip-path is a hard cut (visible or hidden). Use mask-image for fades and smooth reveals, and clip-path for precise shape clipping.
How is browser support
Most modern browsers support mask-image, but Safari often needs the -webkit-mask-image prefix. Internet Explorer does not support it, so add fallbacks if required.
Can I use an image as a mask
Yes. Example: mask-image: url(mask.png);. Opaque pixels stay visible and transparent pixels hide the element. A PNG with alpha channel is recommended.