ZeroServer.tools

CSS Mask Generator

Generate CSS mask-image rules with gradient presets — create fade and reveal effects.

Preview color

CSS output

.masked {
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

Preview

Masked content

CSS mask-image explained

The mask-imageCSS property uses a gradient (or image) as an alpha mask. Pixels where the mask is black are fully visible; pixels where it's transparent are hidden. Gradients from black to transparent create smooth fade effects. Always include the -webkit-mask-image prefix for Safari compatibility.

For clip-path shapes, use the CSS Clip-Path Generator. For box shadow, try Box Shadow Generator. For CSS gradients, see Gradient Generator.

Private & free — this tool runs entirely in your browser.