CSS Mask Image Gradiente

CSS mask-image — alpha masking for modern interfaces

The mask-image CSS property applies an alpha mask to any element, letting parts of it fade, vanish or blend into the background. Unlike clip-path, which produces a binary cut (a pixel is either visible or invisible), masking uses a gradient or image where intermediate values are partially transparent — perfect for soft fade-outs, curved edges and tinted icons.

The minimal syntax is mask-image: linear-gradient(black 50%, transparent 100%) for a gradient mask, or mask-image: url(mask.svg) for an external image. The mask is applied to the entire element, including its children, so a single declaration can fade out a complex DOM tree.

The full mask-* property family

• mask-image — the image, gradient or SVG <mask> reference
• mask-size — cover, contain or explicit dimensions (works like background-size)
• mask-repeat — no-repeat, repeat-x, round, etc.
• mask-position — anchor of the mask inside the element
• mask-mode — alpha, luminance or match-source (controls whether brightness or transparency decides visibility)
• mask-composite — add, subtract, intersect, exclude for Photoshop-style boolean operations between layered masks

Cross-browser support

Chromium 120+ supports the unprefixed mask-* properties; Firefox 53+ has supported them for years; Safari historically requires the -webkit- prefix. The defensive declaration is to write both:

.fade {
  -webkit-mask-image: linear-gradient(black 80%, transparent);
          mask-image: linear-gradient(black 80%, transparent);
}

Real-world use cases

• Fading long previews: the classic "read more" pattern — apply linear-gradient(black 70%, transparent) on the bottom of a content card so the last paragraph dissolves smoothly.
• Curved hero images: a radial or SVG mask cuts a wave or arc at the bottom of a hero photo without needing extra DOM nodes.
• Single-color icon variants: mask a solid background-color with a black-on-transparent PNG/SVG to recolor an icon to any brand color via CSS variables, without exporting new assets.
• Reveal animations: animate mask-position or mask-size to slide content into view — GPU-composited and cheap.

FAQ

How is mask-image different from clip-path? clip-path performs a binary cut: a pixel is visible or it isn't, with no partial opacity. mask-image supports alpha gradients, so pixels can be 50% transparent, blended or feathered. Use clip-path for hard polygonal shapes, mask-image for soft fades and image-based masks.

Should I use SVG or PNG masks? SVG is almost always preferable — it scales perfectly at any DPR, has tiny file size and can be inlined as a data URI. PNG masks introduce blurry edges on retina screens and force a network request.

Can I combine mask-image with filter or backdrop-filter? Yes. The element is rendered, the mask is applied, then filters cascade on top. You can stack a blur, a hue rotation and a mask on the same element without performance issues on modern hardware — masking and filtering are GPU-composited.

Does masking work on background images only, or on the whole element? The whole element, including text and child nodes. This is the key difference vs background-image: a mask cuts through everything the element renders, which is why fading long text previews works so cleanly.