CSSAwwwards
+ Submit tool
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.

20%
80%

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;}

How to use

01

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.

02

Set fade positions

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

03

Preview the mask

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

04

Copy CSS

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

More CSS generator tools

From our directory of 30+ CSS tools.

Browse all →

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →