CSS3 Transparency and Gradients

CSS Web Development Front 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 −

AmitDiwan

Published on 11-May-2020 09:41:00

Previous Page Print Page