How to make transparent web page using CSS ?

Last Updated : 05 Jun, 2023

In this article we are going to learn How to make a transparent web page using CSS, To make a web page transparent using CSS, you can use the “background-color” property with the “rgba” function and set the alpha value to 0. This will make the background transparent. Additionally, you can set the opacity of the entire page using the “opacity” property. You simply need to adjust the opacity value between 0.0 to 1.0 where a low value represents high transparency and a high value represents low transparency.

In order to make any element transparent, you need to add CSS opacity property to the parent of an element.

You can make a transparent web page using two ways.

transparency box: Using opacity to add transparency to the background of an element, makes all of its child elements inherit the same transparency.
transparency using RGBA value: The opacity property is applied to add transparency only to the background of an element.

Example 1: In the following example, when adding opacity to the transparency box, its child elements also end up having transparency, but when using transparency using rgba, it adds transparency only to the background element. So let’s add the transparency property to our web page.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
        }
 
        .box {
            opacity: 0.6;
            background-color: green;
            height: 40px;
            width: 200px
        }
 
        .rgba {
            opacity: 0.8;
            background-color: green;
            background: rgba(76, 175, 80, 0.6);
            height: 40px;
            width: 200px
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <div class="box">
            <p>Transparency Box</p>
        </div>
        <div class="rgba">
            <p>Transparency Using RGBA value</p>
        </div>
    </center>
</body>
</html>

Output:

transparency using opacity property values

Example 2: Follow the steps to create a transparent web page like making a transparent login form.

Step 1:Adding HTML. Add an input for email, password, and a login button. Wrap a “form” element around them to process the input.

Step 2: Add the required CSS to design a transparent login page using RGBA value for the login form as explained above. CSS properties like linear-gradient and box-shadow to achieve the desired result.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
        }
 
        body {
            background: linear-gradient(to right,
                    #12c2e9, #c471ed, #f64f59);
        }
 
        .form {
            width: 300px;
            height: 300px;
            display: grid;
            place-content: center;
 
            /* Add a transparency to the background
               using rgba value */
            background: rgba(255, 255, 255, 0.1);
 
            /* Add a transparency to shadow */
            box-shadow: 0 26px 42px rgba(0, 0, 0, 0.1);
        }
 
        input,
        button {
            box-sizing: border-box;
            width: 100%;
            margin: 20px auto;
            padding: 12px 20px;
            border: none;
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0 13px 21px rgba(0, 0, 0, 0.05);
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
 
        <form class="form">
            <input type="text" placeholder="xyz@gmail.com" /><br>
            <input type="password" placeholder="Enter Password" />
            <br>
            <button type="submit">Login</button>
        </form>
    </center>
</body>
</html>