How to Set Transparency with Linear Gradient in CSS ?

Last Updated : 28 Mar, 2024

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

Using background-image

In this approach, by adjusting gradient colors using the background-image property, we can determine how clear or opaque the image appears. This method adds attractiveness to our web designs. With the help of this method, we can set transparency to the images.

Example: Illustration of transparency Using background image property in CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Illustration of Transparency
        Using background-image in CSS
    </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>Illustration of Transparency Using
        background-image in CSS
    </h1>
    <div class="element">
        <h2>Welcome to GeeksforGeeks</h2>
        <p>GeeksforGeeks is a technology portal providing
            resources for programmers, developers, and
            tech enthusiasts. Explore our tutorials,
            articles, and coding challenges to enhance
            your skills.
        </p>
    </div>
</body>

</html>

CSS

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
    padding-top: 50px;
}

h1 {
    font-size: 32px;
    color: #333;
    margin-bottom: 20px;
}

p {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
}

.element {
    width: 80%;
    max-width: 600px;
    margin: 0 auto;
    padding: 40px;
    background-image: linear-gradient(to bottom right,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.8)), 
url('https://media.geeksforgeeks.org/wp-content/uploads/20240309120355/gfg-gg-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

Output:

Using RGBA Colors

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.

HTML

<!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>

CSS

/*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

Using HSLA Colors

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.

HTML

<!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>

CSS

/*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;
}