CSS Mask Image Generator

mask-image controls the per-pixel visibility of an element using the alpha channel of a mask source: fully opaque mask pixels keep the content visible, fully transparent pixels hide it, and anything in between fades proportionally. A gradient mask therefore creates soft fades (for example an image dissolving into the page background), while an image or SVG mask can cut content into any shape. Unlike opacity, which dims the whole element uniformly, a mask makes visibility itself vary across the element.

clip-path cuts an element into a hard vector shape — circle(), ellipse(), polygon() — with razor-sharp edges and no partial transparency. mask-image does everything clip-path does and more: it supports gradients for soft feathered edges, image and SVG masks for complex shapes, and per-pixel alpha so parts of the element can be semi-transparent. Use clip-path for crisp geometric cutouts; use mask-image whenever you need fades, vignettes, or textured reveals.

Safari and older Chromium-based browsers only recognize the prefixed property: the unprefixed mask-image alone silently does nothing there, so the mask appears to be broken. Current Chrome, Edge and Firefox accept the standard unprefixed form. Shipping both declarations with identical values covers every modern browser, which is why this generator always emits the -webkit- line alongside mask-image (and the same pairing for mask-size, mask-repeat and mask-position).

All current browsers support CSS masking: Chrome and Edge (unprefixed since Chrome 120, prefixed before that), Firefox (unprefixed for years), and Safari (still needs the -webkit- prefix in most versions, so always ship both). Gradients as mask sources work everywhere masking does. The advanced mask-composite property is spottier: the standard keywords add, subtract, intersect and exclude work in Chrome, Edge and Firefox, while Safari uses -webkit-mask-composite with a different keyword set (source-in is the equivalent of intersect).

Yes. mask-image accepts any image source via url(): a PNG with an alpha channel masks by transparency, and an SVG masks by its shapes' alpha. Pair it with mask-size (cover, contain or explicit dimensions), mask-repeat (usually no-repeat) and mask-position to place the mask exactly. An SVG can also be inlined as a data URI — url("data:image/svg+xml,...") — which avoids an extra HTTP request; this generator builds that data URI for you from five built-in shapes or your own SVG markup.

mask-composite controls how multiple mask layers combine when you list more than one source in mask-image. The standard keywords are add (union), subtract (cut the second out of the first), intersect (keep only the overlap) and exclude (keep the non-overlapping parts). A classic use is a vignette plus a bottom fade: mask-image takes both gradients and mask-composite: intersect keeps only pixels visible in both. Note Safari's -webkit-mask-composite uses different keywords — source-in is the equivalent of intersect.

No. This page runs 100 percent in your browser: the mask CSS engine is plain JavaScript with no network requests, no cookies and no analytics on your input. You can disconnect from the internet and it keeps working. Nothing you type or paste ever leaves your device.