How to use the CSS Mask Generator
- Choose an effect: fade one edge, top and bottom, all edges, a vignette, a spotlight or stripes.
- Adjust the fade size, direction, position or stripe width with the sliders.
- Try it on your own picture with Use my image.
- Copy the CSS — it includes
-webkit-mask-image, which Chrome, Edge and Safari still need for some properties.
How CSS masks work
mask-image uses an image or gradient as a stencil: where the mask is opaque the element shows, where it is transparent the element disappears, and in between it fades. Gradients make the most useful masks because they need no extra files:
.hero {
-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
mask-image: linear-gradient(to bottom, #000 70%, transparent);
}- Fading all edges needs two gradients combined with
mask-composite: intersect(and-webkit-mask-composite: source-in), which the generator adds for you. - Masks don’t change layout or hit-testing — the faded area is still clickable.
- Unlike
opacity, a mask can fade only part of an element; unlike an overlay gradient, it shows the real background behind.
Shape masks vs. clip-path
The Shape effect turns a clip-path shape into an inline SVG used as mask-image. The result looks like clip-path but the edge can be feathered, and the shape can be scaled with mask-size and repeated with mask-repeat.
To cut hard shapes instead of fading, use the Clip-path Generator. For color effects, the CSS Filter Generator.
Also searched as: mask-image generator, css fade image edges, css gradient mask, fade out image css, css vignette, mask image linear gradient, webkit mask image, css fade edges.
Tools that pair well with the CSS Mask Generator
- SVG Wave Generator — Design wavy section dividers for landing pages: add or remove waves (up to 6, each with its own color, opacity and shape), set the number of crests, height and smoothness, choose colors and whether the wave sits at the top or bottom.
- Border Radius Generator — Round the corners of any box: drag one slider for all corners or set each corner separately, switch to elliptical corners for blob and leaf shapes, and copy the shortest valid border-radius CSS.
- Glassmorphism Generator — Design a frosted-glass card with live sliders and copy cross-browser CSS — with the -webkit-backdrop-filter prefix and a fallback for older browsers.
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.
Frequently asked questions
How do I fade the edges of an image with CSS?
Apply a gradient mask: mask-image: linear-gradient(to bottom, #000 70%, transparent) fades the bottom. To fade all edges, combine a horizontal and a vertical gradient with mask-composite: intersect — choose “Fade all edges” here.
Do I still need -webkit-mask-image?
Yes, for best support. Chromium-based browsers and Safari still rely on the -webkit- versions of some mask properties, so the generator outputs both.
What is the difference between mask-image and clip-path?
clip-path cuts a hard-edged shape; mask-image can fade gradually using a gradient or image as the stencil.
How do I give a clip-path shape soft edges?
clip-path always cuts hard edges. Choose the Shape effect here: the same shapes become an SVG mask, and the Feather slider blurs its edge so the image fades out smoothly.
Can I use an image or SVG as a mask?
Yes — choose “My image or SVG as the mask” and upload a PNG with transparency or an SVG. Its opaque parts show the element and its transparent parts hide it; set the mask size, repeat and position, then copy the CSS and point url() at your file.
Can I install CSS Mask Generator as a web app and use it offline?
Yes. CSS Mask Generator is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.