CSS Mask Generator
Online CSS mask-image generator with linear/radial/conic gradient controls, live preview, and one-click CSS copy for fade masks and UI animation debugging.
Mask Settings
CSS Code
mask-image: linear-gradient(180deg, black 50%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, black 50%, transparent 100%);Preview
The preview applies the generated mask-image in real time.
Documentation
What is mask-image?
mask-image is a CSS property that applies a mask to an element. The mask acts like an opacity map: transparent parts hide the element, semi-transparent parts fade it, and opaque parts keep it visible.
Compared to hard clipping, mask-image shines for smooth transitions such as fade-outs, softened edges, and artistic reveals, making it ideal for UI overlays and motion design.
How to use
- Choose a mask type: linear, radial, or conic gradient.
- Adjust the angle or position based on the selected type.
- Tune the opaque/transparent stops and watch the live preview.
- Copy the generated CSS and paste it into your project.
Key features
- Three gradient mask types: linear, radial, and conic.
- Adjust angle, position, and opacity stop ranges.
- Live preview for fast iteration.
- One-click CSS copy with -webkit prefix 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 gradients, while clip-path is a hard cut (visible or hidden). Use mask-image for fades and smooth reveals, and clip-path for precise shapes.
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 consider a fallback when needed.
Can I use an image as a mask?
Yes: mask-image: url(mask.png); Opaque pixels stay visible and transparent pixels hide the element. PNG with an alpha channel is recommended for best results.