Градиентные маски в CSS

<!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>

<!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>

<!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>

<!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>

<!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>