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.
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.w3wiki.org/img-practice/prod/courses/1699342871/Web/Content/competitive-programming-cp-thumbnail.webp"); -webkit-mask-image: radial-gradient(circle at center, black 60%, rgba(0, 0, 0, 0.4) 40%); mask-image: radial-gradient(circle at center, black 60%, rgba(0, 0, 0, 0.4) 40%); height: 500px; width: 600px; background-size: cover; } .gfg { color: green; } </style> </head> <body> <h1 class="gfg">w3wiki</h1> <p>Using Radial gradient as a mask layer:</p> <div class="imgbox"> </div> <a href= "https://media.w3wiki.org/img-practice/prod/courses/1699342871/Web/Content/competitive-programming-cp-thumbnail.webp" alt="img"> Click to see the original image </a> </body> </html> |
Output:
How to apply gradient as the mask using CSS ?
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.
Contact Us