What does mask-image do in CSS?

mask-image uses the alpha (or luminance) of a gradient or image to control which parts of an element are visible. Where the mask is opaque black the element shows fully; where it is transparent the element is hidden. A gradient mask therefore creates a smooth fade.

Why does the output include -webkit-mask-image?

Some browsers, notably Safari, still require the -webkit- prefixed property for mask-image. Including both the prefixed and standard declarations ensures the mask works across all current browsers.

Does the mask change the image file?

No. The mask is a CSS visual effect applied at render time. The underlying image is untouched, and no new image files are created — the mask itself is a gradient generated in CSS.

Can I use this to fade a background or a photo into the page?

Yes. Apply the generated mask to any element with a background image or an img, and it will fade out along the direction you chose, letting the page behind it show through smoothly.

What is the CSS Mask Image Generator?

Free CSS mask-image generator. Create edge fades, spotlight and vignette masks with an adjustable falloff, preview them live on a sample tile, and copy a cross-browser mask-image plus -webkit-mask-image declaration. Runs in your browser. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Mask Image Generator

Name: CSS Mask Image Generator
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

mask-image lets you fade an element’s edges or punch a soft spotlight into it using nothing but a CSS gradient — no Photoshop, no PNG masks. This generator builds the common masks and copies a cross-browser declaration.

Mask styles

Style	Effect
Fade bottom / top	Image dissolves into the page along one edge
Fade top + bottom	Both horizontal edges fade — good for scroll areas
Fade left + right	Vertical edges fade — good for carousels
Spotlight	Centre stays solid, edges fade to nothing
Vignette	Centre fades out, edges stay — inverse spotlight

The output

-webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 80%, transparent 100%);

The falloff slider moves the colour stops so you control how gradual the transition is. The -webkit- prefixed line is included because Safari still needs it.

Because the mask is a gradient, it adds no image files and the underlying element is never modified — the effect is applied purely at render time. The live preview and generation run in your browser.