Design a Frosted Glass Effect using HTML and CSS - GeeksforGeeks

11 Feb, 2021
In this article, we will implement a frosted glass effect using the bootstrap 4 card class. The below image is the final output that you will get as the final result of this article.
Approach:
1. Styling the body: Let’s first set the background for your webpage. Write the below code under your head tag inside your <style> tag. If you have already set your background property (which you would have) then skip to the next section. If not, here you go.
CSS
body {     background-image: url('background.jpg');     background-repeat: no-repeat;     background-size: 100%;     background-attachment: fixed;}
2. Frost glass card: Under the style tag, use the following code,
CSS
.card {      box-shadow: 0 0 5px 0 ;      background: inherit;      backdrop-filter: blur(10px);      <!--margin: 100px; according to your need-->}
So what do we have here,
box-shadow: This property is used to give a shadow-like effect to the frames of an element.
background: Use this to make the element transparent and have the same background as your webpage (in the body class its necessary to have “background-attachment: fixed,”)
backdrop-filter: Use this to apply effects to the area behind an element. (Read this as well) Basically, this is the property that is reducing a lot of CSS styling here.
margin: Margin and padding are according to your need.
Note: There have been issues with Mozilla’s browser Firefox and in cases, the backdrop-filter doesn’t work properly, chrome and edge work fine.
3. <div> in body:
HTML
<body>    <div class="container">        <div class="card card-body" style="justify-content: center;">            <!--Contents <h1 >_______</h1> -->        </div>    </div></body>
Final Code:
HTML
<!DOCTYPE html><html lang="en">  <head>    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">      <style>        body {            background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/20200318142240/Bootstrap5.png");            background-repeat: no-repeat;            background-size: 100%;            background-attachment: fixed;        }                  h1 {            color: white;            height: 250px;            display: flex;            justify-content: center;            align-items: center;        }                  .card {            top: 50%;            box-shadow: 0 0 5px 0;            background: inherit;            backdrop-filter: blur(10px);            margin: 100px;            text-align: center;        }    </style></head>  <body>      <div class="container">        <div class="card card-body"             style="justify-content: center;">            <h1>GeeksforGeeks</h1>        </div>    </div></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.
Bootstrap-Questions
CSS-Questions
HTML-Questions
Technical Scripter 2020
Bootstrap
CSS
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
How to Add Image into Dropdown List for each items ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form