How to make a glass/blur effect overlay using HTML and CSS ?

13 Jun, 2022
To give a background blur effect on an overlay, the CSS’s backdrop-filter: blur() property is used with ::before pseudo-element. The “backdrop-filter: blur()” property gives the blur effect on the box or any element where it is desired and “before” is used to add the blurred background without applying any extra markup.
HTML Code: In this section, we will use HTML code to design the basic structure of the web page.
HTML
<!DOCTYPE html><html> <head>    <meta charset="utf-8">    <title>        How to make a CSS glass/blur        effect work for an overlay?    </title>         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body>    <section>               <div class="layout">            <h1>GeeksforGeeks</h1>                         <p class="py-2">                It is a computer science portal for geeks.                It is a platform where you can learn and                practice programming problems. It contains                programming content, web technology content,                and some other domain content also.            </p>              <button class="btn btn-danger">                Button            </button>        </div>           </section></body> </html>
CSS Code: In this section, we will use some CSS properties to make a glass/blur effect overlay using HTML and CSS.
CSS
/* CSS code */body {            margin: 0;            padding: 0;        }         section {            display: flex;            background: #001923;            justify-content: center;            align-items: center;            width: 100%;            min-height: 100vh;        }         section .layout {            position: relative;            width: 100%;            max-width: 600px;            padding: 50px;            box-shadow: 0 10px 20px rgba(0, 0, 0, .1);            background: rgba(255, 255, 255, 0.1);            backdrop-filter: blur(20px);            border: 1px solid rgba(255, 255, 255, 0.25);            border-radius: 10px;        }         section .layout::before {            content: '';            position: absolute;            top: 0;            bottom: 0;            left: 0;            right: 0;        }         section .layout h1 {            position: relative;            text-align: center;            color: rgb(36, 168, 36);        }         section .layout p {            position: relative;            color: #fff;        }         section .layout button {            position: relative;        }
Combined Code: In this section, we will combine the above two sections of code (HTML and CSS code) to make a glass/blur effect overlay.
HTML
<!DOCTYPE html><html> <head>    <meta charset="utf-8">    <title>        How to make a CSS glass/blur        effect work for an overlay?    </title>         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">     <style>        body {            margin: 0;            padding: 0;        }         section {            display: flex;            background: #001923;            justify-content: center;            align-items: center;            width: 100%;            min-height: 100vh;        }         section .layout {            position: relative;            width: 100%;            max-width: 600px;            padding: 50px;            box-shadow: 0 10px 20px rgba(0, 0, 0, .1);            background: rgba(255, 255, 255, 0.1);            backdrop-filter: blur(20px);            border: 1px solid rgba(255, 255, 255, 0.25);            border-radius: 10px;        }         section .layout::before {            content: '';            position: absolute;            top: 0;            bottom: 0;            left: 0;            right: 0;        }         section .layout h1 {            position: relative;            text-align: center;            color: rgb(36, 168, 36);        }         section .layout p {            position: relative;            color: #fff;        }         section .layout button {            position: relative;        }    </style></head> <body>    <section>        <div class="layout">            <h1>GeeksforGeeks</h1>                         <p class="py-2">                It is a computer science portal for geeks.                It is a platform where you can learn and                practice programming problems. It contains                programming content, web technology content,                and some other domain content also.            </p>              <button class="btn btn-danger">                Button            </button>        </div>    </section></body> </html>
Output: 
 
HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
CSS is the foundation of web pages and is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
gulshankumarar231
sanjyotpanure
CSS-Misc
HTML-Misc
Picked
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
HTTP headers | Content-Type