CSS Mask Image Generator

You want a card with content that fades to transparent at the bottom — a “read more” teaser effect. clip-path hard-clips with a sharp edge. opacity fades the entire element uniformly. Neither produces the smooth gradient-to-transparent look you need. mask-image with a linear-gradient does exactly this, but the syntax is verbose, requires -webkit- prefixes for Safari, and you need to coordinate mask-size, mask-repeat, and mask-mode to get it right.

Why This Generator (Not the Backdrop Filter Generator)

PureDevTools has a CSS Backdrop Filter Generator for blurring content behind an element. This tool is for masking — controlling which parts of an element are visible using gradients or SVG shapes. You get sliders for gradient stops, SVG shape selection, and all mask property controls with a live checkerboard preview showing exactly where content is hidden. Everything runs in your browser; no data is sent anywhere.

What Is CSS mask-image?

The CSS mask-image property defines a mask layer image that controls the visibility of an element. Where the mask is opaque (or bright in luminance mode), the element is visible. Where the mask is transparent (or dark), the element is hidden. This enables creative effects like fading content at the edges, revealing content through a shape, spotlight cutouts, and custom-shaped images.

Unlike clip-path which hard-clips the element, mask-image supports soft edges through gradients — making it ideal for smooth fade effects, vignettes, and composited layered designs.

Gradient Masks vs SVG Shape Masks

Gradient masks use transparency (rgba(0,0,0,0) = hidden, rgba(0,0,0,1) = visible) optimised for mask-mode: alpha. SVG shape masks use white fill on a transparent background, compatible with both alpha and luminance modes.

How to Use This Tool

1. Choose a mask type — Select Linear Gradient, Radial Gradient, Conic Gradient, or SVG Shape from the type tabs.
2. Apply a preset — Use one of the 8 presets (Fade Right, Fade Bottom, Fade Edges, Vignette, Spotlight, Circle, Star, Hexagon) to start with a ready-to-use configuration.
3. Adjust controls — For gradients, set the angle/direction and drag color stop sliders to control opacity and position. For SVG shapes, click the desired shape.
4. Configure mask properties — Set mask-size, mask-repeat, mask-position, and mask-mode to fine-tune how the mask is applied.
5. Preview live — The checkerboard background reveals transparent areas of your masked element in real time.
6. Copy the CSS — Click Copy to get the complete CSS block with both -webkit-mask-* and standard mask-* properties ready to paste.

Generated CSS Structure

The tool outputs all required properties with the -webkit- prefix for Safari compatibility:

.masked-element {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1.00) 0%, rgba(0, 0, 0, 0.00) 100%);
  -webkit-mask-size: auto;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1.00) 0%, rgba(0, 0, 0, 0.00) 100%);
  mask-size: auto;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-mode: alpha;
}

mask-mode: alpha vs luminance

The mask-mode property controls how the mask image values are interpreted:

For gradient masks in this tool (which use rgba(0,0,0,opacity)), alpha mode works best. For SVG shape masks (white fill), both alpha and luminance work correctly.

Color Stop Opacity Explained

For gradient masks, each color stop controls the visibility of the masked element at that position:

• 100% opacity → rgba(0,0,0,1.00) → element fully visible at this point
• 50% opacity → rgba(0,0,0,0.50) → element 50% visible at this point
• 0% opacity → rgba(0,0,0,0.00) → element fully hidden at this point

You can add up to 4 stops to create complex multi-stage masks.

Common CSS Mask Patterns

Fade card content at the bottom

.card-body {
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
  mask-mode: alpha;
}

Circular avatar cutout

.avatar {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='45' fill='white'/></svg>");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='45' fill='white'/></svg>");
  mask-size: contain;
  mask-repeat: no-repeat;
}

Vignette photo effect

.photo {
  -webkit-mask-image: radial-gradient(ellipse farthest-corner at center, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(ellipse farthest-corner at center, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
}

Scrollable list with edge fade

.list-container {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
}

mask-size, mask-repeat, mask-position

These properties work similarly to background-size, background-repeat, and background-position:

For SVG shape masks, use mask-size: contain with mask-repeat: no-repeat and mask-position: center to center the shape within the element.

Browser Support

mask-image has broad modern browser support with -webkit- prefix for Safari:

Always include both -webkit-mask-image and mask-image for full cross-browser compatibility. This tool generates both automatically.

Frequently Asked Questions

Why is my mask-image not working in Safari? Safari requires the -webkit-mask-image prefix. Always include both the prefixed and standard declarations. This tool generates both automatically.

Can I use mask-image with images? Yes. You can use mask-image: url("image.png") with any image where bright pixels reveal and dark pixels hide the element (with mask-mode: luminance). This tool covers gradient and SVG masks — for image masks, use an external image URL.

What is the checkerboard background in the preview? The checkerboard pattern represents transparent areas — the same way image editors show transparency. Where you see the checkerboard, the masked element is fully or partially hidden. This makes it easy to visualise the mask boundaries.

Can I layer multiple masks? Yes. CSS masking supports comma-separated multiple mask layers, similar to multiple backgrounds. Each layer uses separate mask-image, mask-size, and mask-position values. This tool generates single-layer masks.

Is my data sent to a server? No. All CSS generation, SVG construction, and preview rendering happen entirely in your browser. No data is transmitted anywhere and nothing is tracked.

Does mask-image work on images and videos? Yes. mask-image can be applied to any HTML element including <img>, <video>, <canvas>, and <div>. The mask reveals or hides the element’s rendered content including its children.