Creating a Glassmorphism effect with CSS

Glassmorphism is a style that helps the design look modern and elegant. It can be used for various purposes depending on the design objective. this effect is used to make it easier to read the text used in the photo or to focus on the content we want to highlight.

In this article, I will look at how we use HTML and CSS to create the glassmorphism effect in two different ways.

Using the filter property

Let’s create an area inside the <body> tag where we apply the effect.

<div class="glassbox">
  <h1>Glassmorphism</h1>
  <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
</div>

Let’s add some style to the <body> tag.

body {
  background: #f0f1f3;
  background-image: url('background-image.png');
  background-size:cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0 20rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

With background-attachment: fixed property, the size and position of the background image stay constant during page scrolling.

Let’s add some style to the div tag.

.glassbox {
  position: relative;
  z-index: 1;
  width: 100%;
  background: inherit;
  box-shadow: 0px 0px 1rem 0 rgb(0,0,0,0.2);
  border-radius: 10px;
  border: 1px solid rgb(255 255 255 / 15%);
  text-align: center;
}

background: inherit, its use is a major point. If we had not used the background-attachment: fixed property, the background image would have resized according to the div tag. The situation simulates the effect of glassmorphism. The following visual is the background-attachment: fixed unapplied state of the structure we create. In this case, the background image effect resizes in the box we want to apply.

glassmorphism effect with css

The image created using the background-attachment: fixed property and the background: inherit property is shown below. In the picture, we can see a continuity between the background image and the box. This situation is more appropriate for the effect of glassmorphism, so background-attachment: fixed is a key point.

glassmorphism effect with css

Now, using the box-shadow attribute, let’s create a pseudo element that’s blurry and large enough to cover the effect field. So we get the effect of glassmorphism. That’s the logic underlying the first method we talked about.

.glassbox::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: inherit;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0px 0px 1rem 10rem rgb(255,255,255,0.2); 
  filter: blur(10px);
}

Also, note that background: inherit is used here. We can get the glassmorphism effect with using filter:blur(10px) property.

The results of this method are shown in the following image.

glassmorphism effect with css

Using the backdrop-filter feature

We can also get the same image using the backdrop-filter feature. backdrop-filter property is used to apply filter effects to the background of an element. This property also frees us from creating an area or pseudo-element and more CSS rules. The property is applied directly to the background and to the element itself. However, browser support is lower compared to the filter property of the backdrop-filter. You can visit the can I use the site for details. With the style specified below, we can get the effect of glassmorphism.

.glassbox {
  position: relative;
  z-index: 1;
  width: 100%;
  background: rgba( 255, 255, 255, 0.10 );
  box-shadow: 0px 0px 1rem 0 rgb(0,0,0,0.2);
  border-radius: 10px;
  border: 1px solid rgb(255 255 255 / 15%);
  text-align: center;
  backdrop-filter: blur( 10.0px );
  -webkit-backdrop-filter: blur( 10.0px );
}

You can find all the codes we have generated in below.

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      *,
      *:before,
      *:after {
        box-sizing: border-box;
      }
      body {
        background: #f0f1f3;
        background-image: url('abstract-gbe214116b_1280.png');
        background-size:cover;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        margin: 0;
        padding: 0 20rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
      /* backdrop-filter used */
      .glassbox {
         position: relative;
         z-index: 1;
         width: 100%;
         background: rgba( 255, 255, 255, 0.10 );
         box-shadow: 0px 0px 1rem 0 rgb(0,0,0,0.2);
         border-radius: 10px;
         border: 1px solid rgb(255 255 255 / 15%);
         text-align: center;
         backdrop-filter: blur( 10.0px );
         -webkit-backdrop-filter: blur( 10.0px );
       }
       /* filter attribute and pseudo element used */
       .glassbox {
         position: relative;
         z-index: 1;
         width: 100%;
         box-shadow: 0px 0px 1rem 0 rgb(0,0,0,0.2);
         border-radius: 10px;
         border: 1px solid rgb(255 255 255 / 15%);
         text-align: center;
         background: inherit;
       }
      .glassbox::before {
        content: "";
        position: absolute;
        z-index: -1;
        background: inherit;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        box-shadow: inset 0px 0px 1rem 10rem rgb(255,255,255,0.2); 
        filter: blur(10px);
      }
      h1 {
        font-size: 36px;
        line-height: 1.2em;
        color: rgb(238, 146, 26);
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
      }
      h2 {
        font-size: 20px;
        line-height: 1.5em;
        color: rgb(27, 77, 48);
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
        padding: 1rem;
      }
    </style>
  </head>
  <body>
    <div class="glassbox">
      <h1>Glassmorphism</h1>
      <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
    </div>
</body>
</html>