How to use RGBA Colors In CSS
In this approach, we will use the rgba() function, this function lets us define colors using the red, green, and blue (RGB) color model, along with an alpha channel to control transparency. The alpha value, ranging from 0 (fully transparent) to 1 (fully opaque), determines how transparent each color stop is along the gradient.
Example: Illustration of transparency Using linear gradient with RGBA colors in CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Linear Gradient with RGBA Colors</title>
<link rel="stylesheet"
type="text/css"
href="style.css">
</head>
<body>
<h3>Set Transparency with Linear
Gradient using RGBA Colors
</h3>
<div class="container">
<div class="element">
</div>
</div>
</body>
</html>
/*style.css */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
.container {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: rgba(255, 255, 255, 0.5);
height: 300px;
width: 300px;
background-image: linear-gradient(to bottom,
rgba(255, 0, 0, 0.5),
rgba(0, 255, 0, 0.5));
background-size: cover;
background-position: center;
text-align: center;
}
Output:
Output
How to Set Transparency with Linear Gradient in CSS ?
In web design, colors, and gradients play a vital role in crafting visually appealing websites. Incorporating transparency into specific elements can further enhance their visual impact. We’ll explore three methods for achieving transparency with linear gradients in CSS including, background image, linear gradients with RGBA colors, and HSLA colors.
These are the following approaches to set Transparency with Linear Gradient in CSS:
Table of Content
- Background-image
- Linear Gradient with RGBA Colors
- HSLA Colors