CSS3 Transparency and Gradients
Linear gradients are used to arrange two or more colors in linear formats like top to bottom. To add transparency, use the RGBA() function and define the color stops.
Following is the code to set transparent linear gradient using CSS3 −
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.linearGradient {
height: 200px;
background-image: linear-gradient(
to left,
rgb(111, 0, 255),
rgba(111, 0, 255, 0.616),
rgba(111, 0, 255, 0.384),
rgba(111, 0, 255, 0)
);
}
</style>
</head>
<body>
<h1>Linear Gradient with transparency</h1>
<div class="linearGradient"></div>
<h2>The above linear gradient goes from white to dark blue purple</h2>
</body>
</html>Output
The above code will produce the following output −
Published on 11-May-2020 13:11:00
