How to make transparent web page using CSS ? - GeeksforGeeks

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.
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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
simmytarika5
CSS-Properties
CSS-Questions
HTML-Questions
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
How to set space between the flexbox ?
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?