How to use HSLA Colors In CSS
In this approach, first create a centered box with a linear gradient background using HSLA colors, which allows for transparency. The gradient transitions from red (hue 0) to blue (hue 240) with 50% saturation and lightness, while the alpha value (0.5) controls the transparency level.
Example: Illustration of transparency with Linear Gradient in CSS Using HSLA 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>Transparency Using HSLA Colors</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="gradient-box-hsla">
<h1>Transparency Using HSLA Colors</h1>
</div>
</div>
</body>
</html>
/*style.css */
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
}
.gradient-box-hsla {
width: 70%;
padding: 20px;
background-image: linear-gradient(hsla(0, 100%, 50%, 0.5),
hsla(240, 100%, 50%, 0.5));
border-radius: 10px;
text-align: center;
color: #fff;
}
.gradient-box-hsla h1 {
margin-bottom: 10px;
}
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