Mask-image supplies an image used to hide or reveal portions of an element. A gradient can act as the mask, with transparent regions hiding pixels and opaque regions retaining them.
Make this comfortable
CSS mask-image: fade decoration without fading data
When to use it
An archive header has a colored stripe that fades toward its trailing edge. Apply the mask to a separate decoration element, not to the header containing the archive title, account number, or actions. The sample has a base header background so losing the masked stripe does not remove contrast or meaning. Do not use a mask to conceal confidential text: the underlying content remains in the document and may still be available to scripts or copied data. Test browser support, high contrast modes, print, and a narrow translated title. If a mask is unsupported, the stripe may show in full, so its unmasked form must also be harmless. Keep any pointer input on the real controls, not on the decoration.
.archive-header { position: relative; background: #173148; color: #fff; }
.archive-header__stripe { position: absolute; inset: auto 0 0; block-size: .5rem; background: #7fc6d2; mask-image: linear-gradient(90deg, #000, transparent); pointer-events: none; }Cost and verification
A simple gradient mask is usually modest, but masks over many large animated surfaces can add compositing work. Measure before treating it as an inexpensive universal effect. Keep fallback colors and contrast stable when the mask is absent. Masking changes visible pixels, not document semantics or the original box size. A decorative layer should not capture clicks or cover the focus ring; inspect stacking and clipping around the header. If the design can use a plain gradient background instead, compare the simpler rendering path before adding a mask.
Common Mistakes
- Do not mask required text or controls.
- Do not treat a mask as redaction.
- Do not assume the unmasked fallback remains visually harmless without checking it.
Connected lessons
css
reference
web