How to apply gradient as the mask using CSS ?

Last Updated : 20 Dec, 2023

In this article, we will learn how to include the gradient as the mask layer in CSS, along with understanding their basic implementation with the help of suitable examples. The Mask Property with a Gradient is used to create a mask layer, that can be utilized for rendering or hiding the area of the content of an element. There are mainly 2 types of Gradient that can be used as the mask layer in CSS:

Table of Content

Linear Gradient
Linear Gradient with text masking
Radial Gradient

We will explore the above topics to include the gradient as the mask layer in CSS.

Linear Gradient

The property mask image with the linear-gradient is used to create a transition between the transparent area and the opaque area.

Syntax

// For Linear Gradient
mask-image: linear-gradient(rgb(24, 23, 23), transparent);

Example: The following example illustrates the linear gradient as the mask layer.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>CSS Gradient</title>
    
    <style>
        img {
            height: 300px;
            width: 300px;
        }

        .imgbox {
            background-image: url(
"https://media.geeksforgeeks.org/img-practice/prod/courses/1699342871/Web/Content/competitive-programming-cp-thumbnail.webp");
            mask-image: 
                linear-gradient(rgb(24, 23, 23), transparent);
           -webkit-mask-image: 
                linear-gradient(rgb(24, 23, 23), transparent);
                height: 500px;
                width: 600px;
                background-size: cover;
        }
        .gfg{
            color: green;
        }
    </style>
</head>

<body>
    <h1 class="gfg">GeeksforGeeks</h1>
    <p>Using Linear gradient as a mask layer:</p>
    <div class="imgbox"></div>
    <a href=
"https://media.geeksforgeeks.org/img-practice/prod/courses/1699342871/Web/Content/competitive-programming-cp-thumbnail.webp">
      Click to see the original image
      </a>
</body>

</html>

Output:

Linear Gradient with Text Masking

The property mask-image with linear-gradient is used for masking the text to create a transition between the transparent area and the opaque area.

Example: The following example illustrates the linear gradient with text as the mask layer.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>CSS Gradient</title>
    <style>
        .tbox {
            background-color: aquamarine;
            mask-image:
                linear-gradient(rgb(27, 22, 22), transparent);
            -webkit-mask-image:
                linear-gradient(rgb(27, 22, 22), transparent);
        }

        .gfg {
            color: green;
        }

        .ptext {
            width: 500px;
            font-size: 30px;
            padding: 10px;

        }

        .texttitle {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <h1 class="gfg">GeeksforGeeks</h1>
    <p class="texttitle">
          Linear gradient as a mask layer:
      </p>
    <div class="tbox">
        <p class="ptext">
            Competitive Programming is a mental sport
            which enables you to code a given problem
            under provided constraints. The purpose of
            this article is to guide every individual
            possessing a desire to excel in this sport.
            This article provides a detailed syllabus
            for Competitive Programming designed by
            industry experts to boost the preparation
            of the readers.
          </p>
    </div>
</body>

</html>

Output:

Radial Gradient

The property mask-image with radial-gradient is used to create a beautiful effect between transparent and opaque areas. The radial-gradient makes the effect of the circle or circle-like structure.

Syntax

// For Radial Gradient
mask-image: radial-gradient(circle at center, black 60%, rgba(0, 0, 0, 0.4) 40%);

Example: The following example illustrates the Radial gradient as the mask layer with the shape circle.