CSS Click Chart

common stuff
cutting-edge

Masks

Allows you to use a graphical element or image as a luminance or alpha mask to hide portions of elements.

Specification

Example Code

.element {
  background: url(compass.png);
  mask-image: linear-gradient(black 0%, black 9%, transparent 10%, 
              transparent 19%, black 20%, black 29%, transparent 30%, 
              transparent 39%, black 40%, black 49%, transparent 50%, 
              transparent 59%, black 60%, black 69%, transparent 70%, 
              transparent 79%, black 80%, black 89%, transparent 90%, 
              transparent 99%, black 100%);
}

Live Demonstration

The image below has been partially masked with a staggered transparent gradient.

Browser Support

Can I Use css-masks? Data on support for the masks feature across the major browsers from caniuse.com.

Tools / Polyfills

Tutorials / Articles

Clipping and Masking in CSS
CSS Masks on WebKit blog
Masking in the Browser with CSS and SVG