CSS Gradient Mask Layers
A CSS gradient can serve as the mask layer image too.
Linear Gradient Mask Layer
An image's mask layer can be a linear gradient. In the example below, the gradient starts black at the top, where the image is fully visible, and fades to transparent at the bottom, where it is hidden.
Example
Here a linear gradient acts as the mask layer.
Prompt
Create a page that shows an image (use img_5terre.jpg) with a CSS linear gradient mask applied. The gradient goes from black at the top to transparent at the bottom, making the image fade out toward the bottom. Include both the -webkit-mask-image and mask-image properties.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient Mask</title>
<style>
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
}
</style>
</head>
<body>
<h2>Linear Gradient Mask Layer</h2>
<p>The image below uses a linear gradient as a mask layer. The gradient goes from black (fully visible) at the top to transparent (hidden) at the bottom:</p>
<img class="mask1" src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</body>
</html>
Linear gradient with text masking
Pair a linear gradient with text masking, and the combination can mask a background image as well.
Prompt
Create a page with a div that has a background image (use img_5terre.jpg no-repeat) set to max-width 600px and height 400px. Apply a linear gradient mask from black to transparent so the background image fades out toward the bottom. Add two paragraphs of text about Cinque Terre over the image area.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient Text Mask</title>
<style>
.mask1 {
max-width: 600px;
height: 400px;
overflow: hidden;
background: url(img_5terre.jpg) no-repeat;
background-size: cover;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
color: white;
padding: 20px;
}
</style>
</head>
<body>
<h2>Linear Gradient with Text Masking</h2>
<div class="mask1">
<p>Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
<p>Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
</div>
</body>
</html>
Radial Gradient Mask Layer - Circle
A circle-shaped radial gradient also works as an image's mask layer.
Example
Here a circular radial gradient acts as the mask layer.
Prompt
Create a page showing an image (use img_5terre.jpg) with a CSS radial gradient mask shaped as a circle. The gradient goes from black at 50% to rgba(0,0,0,0.5) at 50%, creating a circular mask effect. Include both -webkit-mask-image and mask-image properties.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radial Gradient Circle Mask</title>
<style>
.mask2 {
-webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
</style>
</head>
<body>
<h2>Radial Gradient Mask Layer - Circle</h2>
<p>The image below uses a radial gradient (circle) as a mask layer:</p>
<img class="mask2" src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</body>
</html>
Radial Gradient Mask Layer - Ellipse
Radial gradients can take an ellipse shape too, and that also works as an image's mask layer.
Example
Here an elliptical radial gradient acts as the mask layer.
Prompt
Create a page showing an image (use img_5terre.jpg) with a CSS radial gradient mask shaped as an ellipse. The gradient goes from black at 50% to rgba(0,0,0,0.5) at 50%, creating an elliptical mask effect. Include both -webkit-mask-image and mask-image properties.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radial Gradient Ellipse Mask</title>
<style>
.mask3 {
-webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
</style>
</head>
<body>
<h2>Radial Gradient Mask Layer - Ellipse</h2>
<p>The image below uses a radial gradient (ellipse) as a mask layer:</p>
<img class="mask3" src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</body>
</html>
Conic Gradient Mask Layer
An image's mask layer can also be a conic gradient. This one sweeps around from black at 0 degrees to transparent at 360 degrees.
Example
Here a conic gradient acts as the mask layer.
Prompt
Create a page showing an image (use img_5terre.jpg) with a CSS conic gradient mask. The gradient goes from black at 0deg to transparent at 360deg, creating a sweeping reveal effect. Include both -webkit-mask-image and mask-image properties.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conic Gradient Mask</title>
<style>
.mask4 {
-webkit-mask-image: conic-gradient(black 0deg, transparent 360deg);
mask-image: conic-gradient(black 0deg, transparent 360deg);
}
</style>
</head>
<body>
<h2>Conic Gradient Mask Layer</h2>
<p>The image below uses a conic gradient as a mask layer:</p>
<img class="mask4" src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</body>
</html>
CSS All Masking Properties
Every CSS masking property is listed here:
mask-clip- Determines the area a mask image affects.mask-composite- Defines the compositing operation between the current mask layer and the mask layers below it.mask-image- Names the image that acts as an element's mask layer.mask-mode- Chooses whether a mask layer image counts as a luminance mask or an alpha mask.mask-origin- Defines where the origin of a mask layer image is positioned.mask-position- Sets where a mask layer image starts.mask-repeat- Controls the way a mask layer image repeats.mask-size- Controls how large a mask layer image is.mask-type- Chooses whether an SVG<mask>element counts as a luminance mask or an alpha mask.