Codectionary / Developer documentation / CSS

Fading Graphics with CSS Masks

A CSS mask controls visibility using the alpha or luminance of another image. A gradient mask can fade a graphic without changing its underlying colors. Modern engines support unprefixed mask properties; older WebKit-based browsers may require prefixed forms.

Syntax

.graphic { mask-image: linear-gradient(to right, black, transparent); }

Examples

Fading Graphics with CSS Masks: working example

Run this CSS against the example’s own HTML. The explanation describes the expected result.

/* Neutral page for this self-contained document. */
body { color: #182338; background: #fff; }

.graphic { width: 18rem; height: 8rem; background: repeating-linear-gradient(45deg, #1d4ed8 0 1rem, #93c5fd 1rem 2rem); mask-image: linear-gradient(to right, black, transparent); }
  1. Expected result: In supporting browsers the striped graphic becomes progressively transparent toward the right.
  2. Opaque black in this gradient’s alpha mask keeps pixels visible.
  3. Transparent mask pixels hide the underlying graphic, revealing the page background.
HTML used by this example

<div class="graphic" role="img" aria-label="Blue stripe fading from left to right"></div>

Best practices

  • Avoid masking essential content without another accessible representation.
  • Test prefix requirements if targeting older Safari versions.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading