Built-in toolFree · No signup

CSS Mask Generator

Generate CSS mask-image effects to fade or reveal elements using gradient masks. Choose from linear directions, radial center fades, or dual-edge fades. Control the fade start and end positions with precision. The output includes both the standard mask-image and the -webkit-mask-image prefix for full Safari support.

Share on X LinkedIn

Fade start20%

Fade end80%

Mask shape preview (green = visible, transparent = hidden)

Effect on image (rainbow gradient simulates your content)

CSS Output

.masked-element {  -webkit-mask-image: linear-gradient(to right, black 20%, transparent 80%);  mask-image: linear-gradient(to right, black 20%, transparent 80%);  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;}

Was this tool helpful?

How to use

Pick a mask type

Choose a direction for a linear fade, radial for a centre-out vignette, or dual-edge to fade both sides simultaneously.

Set fade positions

Adjust fade start and end sliders to control where the fade begins and ends as a percentage of the element.

Preview the mask

The coloured gradient preview shows the mask shape — black is fully visible, transparent is fully hidden.

Copy CSS

Output includes both -webkit-mask-image and mask-image plus mask-size and mask-repeat for complete CSS.