Design a Frosted Glass Effect using HTML and CSS

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;
}

You can read about the above properties here

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:

Design a Frosted Glass Effect using HTML and CSS

You can read about the above properties here

Explore