midCSS
How does mask-image work in CSS?
Updated Apr 28, 2026
Short answer
It uses an image or gradient to hide portions of an element, creating complex transparency channels.
Deep explanation
Unlike clip-path (which uses vector shapes), mask-image uses the alpha channel or luminance of an image/gradient. If a pixel in the mask is black/opaque, the element shows. If it's transparent, the element is hidden. This allows for soft, feathered edges.
Real-world example
Creating a 'fade to transparent' effect at the bottom of a scrollable text container to indicate more content below.
Common mistakes
- Forgetting the `-webkit-` prefix, as masking still requires vendor prefixes in many major browsers for robust support.
Follow-up questions
- What is mask-size?