css - CSS Masking Part 2: CSS Masking with Gradients

Instead of using an image as a mask, gradients can be used to create soft fades and other effects.

Example 1: Linear Gradient Mask

div {

width: 300px; height: 300px;

background: url('image.jpg') center/cover;

mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));

-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));

}

Explanation: The left side of the image is fully visible, and it gradually fades out toward the right. This is useful for overlay effects.

Example 2: Radial Gradient Mask

div {

mask-image: radial-gradient(circle, rgba(0,0,0,1), rgba(0,0,0,0));

}

Explanation: The center of the element remains fully visible while the edges fade out into transparency.