Question 1

What is the CSS mask property?

Accepted Answer

The CSS mask property clips an element's visibility using an image or gradient as a mask. White areas of the mask show the element, black areas hide it. The mask-image accepts url(), linear-gradient(), radial-gradient(), or any image. It's used for text reveals, fade-out edges, and shape cutouts.

Question 2

How do I fade the edge of an element with CSS?

Accepted Answer

Use mask-image with a linear gradient: mask-image: linear-gradient(to right, black 80%, transparent 100%). This fades the right edge to transparent. For both edges: mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%).

Question 3

What is the difference between mask and clip-path?

Accepted Answer

clip-path hides everything outside a geometric shape. mask hides based on image luminance — allowing soft edges, gradients, and complex patterns. clip-path is crisper and more performant; mask is more flexible for artistic effects. Both remove the element from click targets in hidden areas.

CSS Mask Generator

Mask Presets

Mask Type

Mask Options

Related Tools