CSS Alpha Masking Skill

Horizontal (left/right) fade

mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);

Vertical (top/bottom) fade

mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
-webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);

Usage checklist

• Apply mask styles directly on element or in CSS class
• Always include both mask-image and -webkit-mask-image for Safari
• Element must have visible content — masks reveal/hide alpha only