Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
CSS3 Transparency and Gradients
Linear gradients are used to arrange two or more colors in linear formats like top to bottom, left to right, or diagonally. To add transparency, use the rgba() function and define the color stops. At least two color stops should be mentioned.
Syntax
selector {
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
}
The direction can be:
to left− Right to Leftto right− Left to Rightto bottom right− Diagonal (top-left to bottom-right)to bottom− Top to Bottom (default)
Example 1: Transparent Gradient (Right to Left)
The following example creates a gradient that begins from dark blue and gradually becomes transparent moving from right to left −
<!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.6),
rgba(111, 0, 255, 0.3),
rgba(111, 0, 255, 0)
);
}
</style>
</head>
<body>
<h1>Linear Gradient with Transparency</h1>
<div class="linearGradient"></div>
</body>
</html>
A 200px tall rectangular area displaying a purple gradient that starts solid on the right and gradually fades to transparent on the left.
Example 2: Transparent to Opaque (Left to Right)
This example shows a gradient starting from completely transparent and transitioning to solid blue −
<!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(0, 0, 255, 0),
rgba(0, 0, 255, 1)
);
}
</style>
</head>
<body>
<h1>Transparent to Blue Gradient</h1>
<div class="linearGradient"></div>
</body>
</html>
A rectangular area showing a gradient that starts completely transparent on the left and becomes solid blue on the right.
Example 3: Diagonal Gradient
The following creates a diagonal gradient from top-left to bottom-right, transitioning from green to orange −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.linearGradient {
height: 200px;
background-image: linear-gradient(to bottom right, green, orange);
}
</style>
</head>
<body>
<h1>Diagonal Linear Gradient</h1>
<div class="linearGradient"></div>
</body>
</html>
A rectangular area displaying a diagonal gradient starting with green in the top-left corner and transitioning to orange in the bottom-right corner.
Example 4: Vertical Gradient with Transparency
This example demonstrates a top-to-bottom gradient with transparent orange fading to solid red −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.linearGradient {
height: 200px;
background-image: linear-gradient(
to bottom,
rgba(255, 165, 0, 0.3),
rgba(255, 0, 0, 1)
);
}
</style>
</head>
<body>
<h1>Vertical Transparent Gradient</h1>
<div class="linearGradient"></div>
</body>
</html>
A rectangular area showing a vertical gradient that starts with transparent orange at the top and transitions to solid red at the bottom.
Conclusion
CSS linear gradients with transparency provide powerful ways to create smooth color transitions. Use rgba() values to control opacity levels and combine different directions to achieve various visual effects for modern web design.
4K+ Views
