CSS3 Transparency and Gradients

CSSWeb DevelopmentFront End Technology

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 −

raja
Published on 11-May-2020 13:11:00
Advertisements