CSS Mask Generator

Build a gradient mask-image, tune size, position, repeat and composite, and preview the fade.

Build a mask image

Mask type Direction

mask-size mask-position

mask-repeat mask-composite

Fade stop: 20%

Sample image block

mask-image: —

size, position, repeat, composite: —

The preview block uses exactly the mask-image, mask-size, mask-position, mask-repeat and mask-composite values written into the CSS box.

Choose a linear or radial gradient mask and set the direction and fade stop.
Adjust mask-size, mask-position, mask-repeat and mask-composite to shape the fade.
Copy the generated rule and apply it to any element in your stylesheet.

Common questions about the free online css mask generator.

A mask uses the alpha channel of a gradient or image to decide which parts of an element stay visible, so you can fade edges or cut shapes out.

You can build a linear-gradient mask with a direction or angle, or a radial-gradient mask centred on the position you pick.

mask-size sets how large the mask image is drawn, while mask-position places that mask image inside the element box.

It decides whether the mask image is drawn once or tiled, so repeat values build stripes and dotted fade patterns.

It controls how several mask layers combine, so values such as add, subtract, intersect and exclude build richer cut outs.

Safari and some older browsers only understand the webkit prefixed names, so the copied rule lists both versions.

Yes. The preview block applies exactly the same mask values that are written into the CSS box, so what you see is what you copy.

Yes. It runs locally in your browser with plain JavaScript, collects nothing and needs no account or sign-up.

Last updated: October 10, 2026