What it is: a mask decides which parts of an element are visible, using the transparency of an image or a gradient. Where the mask is solid, the element shows. Where the mask is transparent, the element is hidden. Unlike clip-path, masks can create soft edges and fades.

Fade out the bottom of a text block

Perfect for a “Read more” excerpt.

.lotgrafix-excerpt {
    max-height: 150px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient( to bottom, #000 60%, transparent );
    mask-image: linear-gradient( to bottom, #000 60%, transparent );
}

Soft edges on an image

.lotgrafix-soft img {
    -webkit-mask-image: radial-gradient( circle, #000 55%, transparent 75% );
    mask-image: radial-gradient( circle, #000 55%, transparent 75% );
}

Cut an element into an SVG shape

.lotgrafix-blob {
    -webkit-mask: url( "blob.svg" ) center / contain no-repeat;
    mask: url( "blob.svg" ) center / contain no-repeat;
}

Color an SVG icon with any color

Use the icon as a mask over a colored background. The icon takes the text color and changes on hover.

.lotgrafix-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url( "icon.svg" ) center / contain no-repeat;
    mask: url( "icon.svg" ) center / contain no-repeat;
}

Fade the edges of a horizontal scroller

.lotgrafix-scroller {
    overflow-x: auto;
    -webkit-mask-image: linear-gradient( to right, transparent, #000 5%, #000 95%, transparent );
    mask-image: linear-gradient( to right, transparent, #000 5%, #000 95%, transparent );
}

Notes

• Keep the -webkit- prefixed lines for older browsers.
• An SVG mask loaded from another domain needs CORS headers.
• A mask also hides the shadow and the children of the element, so apply it carefully.