mask-image

Setting the image that is used as mask layer for an element.

Overview

Examples

Apply a mask image

Use mask-image:* to control the alpha mask for an element.

<div class="mask-image:linear-gradient(black,transparent)">    ...</div>

@layer utilities {    .mask-image\:linear-gradient\(black\,transparent\) {        -webkit-mask-image: linear-gradient(black, transparent);        mask-image: linear-gradient(black, transparent)    }}

Fade overflowing media

Gradient masks are useful when media or scroll regions should fade out without changing layout.

<figure class="overflow:hidden mask-image:linear-gradient(black,transparent)">    ...</figure>

Masks affect painting and hit testing can still follow the original element box. Keep interactive controls outside heavily masked regions.

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="mask-image:none mask-image:linear-gradient(black,transparent)@sm mask-image:none@print">...</div>