CSS Mask Generator

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

Preset: Fade to bottomPreview Size: 300pxMask Type: LinearCSS Length: 159 chars

Preset Masks

Choose Preset

Preview Size

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 Preview Box

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 CSS Box Shadow Generator. For CSS gradients, see CSS Gradient Generator.

Built and maintained by Meet Shah · Last updated 1 August 2026

What this tool is used for

Producing a gradient fade at the edge of a scrolling container.
Masking an image into a shape without editing the asset.
Building a reveal effect from a gradient mask.
Comparing a mask against a clip path for one case.
Fading text out at the bottom of a truncated block.

Frequently Asked Questions

How does a CSS mask work?: The mask image's ALPHA channel decides visibility: opaque areas show the element, transparent areas hide it, and partial alpha gives partial transparency. A linear gradient from black to transparent therefore produces a fade, without touching the element's own colours.
Why use a mask instead of a gradient overlay?: Because a mask makes the element genuinely transparent, so whatever is behind it shows through. An overlay fades toward a fixed colour, which only looks right on a matching background — put it on a photograph or a themed page and the seam is immediately visible.
Do I still need the -webkit- prefix?: For broad support, yes. Safari implemented masking early behind `-webkit-mask-image` and support for the unprefixed property arrived later, so emitting both is still the safe pattern. It is one of the few remaining prefixes that changes whether the rule works at all.
What is a vignette mask made of?: A radial gradient from opaque at the centre to transparent at the edges. Because it is alpha rather than colour, the darkened border of a photographic vignette is replaced by an actually faded border — a different effect that composites correctly over any background.
Can a mask affect clicks?: No — masking is purely visual. A fully transparent region still receives pointer events, which surprises people building a circular reveal and finding the invisible corners still clickable. Use `clip-path` when the shape should affect hit testing as well as appearance.

Common errors and gotchas

Omitting the `-webkit-` prefixed property, which some browsers still require.
Confusing mask with clip-path, where one fades and the other cuts hard.
Masking text and losing legibility at the faded edge.
Assuming a masked area still receives pointer events, which depends on the mask type.
Using a mask where the design needed an actual gradient overlay.