Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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. At least two color stops should be mentioned. Let us first see the syntax.
Syntax
The following is the syntax to create Linear Gradients −
background-image: linear-gradient(dir, colorStop1, colorStop2, colorStop3, ...);
Above, the dir is the direction i.e., from −
Left to Right
Right to Left
Diagonal
Top to Bottom
Linear Gradient Beginning From Right to Left
The following is the code to set transparent linear gradient using CSS3. The linear gradient here begins from the right. Goes from dark blue purple to white −
Example
<!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>
<p>The above linear gradient goes from dark blue purple to white</p>
</body>
</html>
Linear Gradient Beginning From the Left to Right
The following is the code to set transparent linear gradient using CSS3. The linear gradient here begins from the left. It starts with a color and then moved to being fully transparent −
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.linearGradient {
height: 200px;
background-image: linear-gradient(
to right,
rgba(255,0,0,0),
rgba(0,0,255,1)
);
}
</style>
</head>
<body>
<h1>Linear Gradient with transparency</h1>
<div class="linearGradient"></div>
<p>The above linear gradient goes from being complete transparent to blue.</p>
</body>
</html>
Linear Gradient Beginning From top Left to Bottom Right (diagonal)
The following is the code to set transparent linear gradient using CSS3. The linear gradient here begins from the top left and goes to bottom right forming a diagonal. It begins from green and goes to orange −
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.linearGradient {
height: 200px;
background-color: green;
background-image: linear-gradient(to bottom right, green, orange);
}
</style>
</head>
<body>
<h1>Linear Gradient with transparency</h1>
<div class="linearGradient"></div>
<p>The above linear gradient goes from green to orange</p>
</body>
</html>
Linear Gradient Beginning From top to Bottom
The following is the code to set transparent linear gradient using CSS3. The linear gradient here begins from the top. Goes from orange to red −
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.linearGradient {
height: 200px;
background-color: orange;
background-image: linear-gradient(orange, red);
}
</style>
</head>
<body>
<h1>Linear Gradient with transparency</h1>
<div class="linearGradient"></div>
<p>The above linear gradient goes from orange to red</p>
</body>
</html>
3K+ Views
