Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to make transparent web page using CSS ?

  • Last Updated : 02 Sep, 2021

You can easily make a transparent web page using the opacity property in HTML. 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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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 login button. Wrap a “form” element around them to process the input.

Step 2: Add a required CSS to design a transparent login page using RGBA value for 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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!