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 −


 Live Demo

<!DOCTYPE html>
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)
<h1>Linear Gradient with transparency</h1>
<div class="linearGradient"></div>
<h2>The above linear gradient goes from white to dark blue purple</h2>


The above code will produce the following output −

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