Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Design a Frosted Glass Effect using HTML and CSS

  • Difficulty Level : Basic
  • Last Updated : 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.

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

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=
  
    <style>
        body {
            background-image: url(
            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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!