Khushboo Chaturvedi

Posted on Nov 8, 2021

Frosted Glass Effect in CSS

#webdev #css #beginners #tutorial

Frosted glass effect or better known as Glassmorphism has been a trending UI feature for quite sometime now. Mac OS is famous for its frosted glass effect and Windows 10 have also got frosted glass effect implemented along with websites like Github.

Today we will be seeing two ways to get a frosted glass effect using pure CSS.

Image Source: Anton Olashyn's design on Dribbble

Method One

Let's start by creating a div with class wrapper in our html code.



<div class="wrapper"></div>

Now we'll remove the margin and padding for all the elements and give our html and body a height of 100vh so that they cover the entire screen.



   * {
        margin: 0;
        padding: 0;
      }
body,html {
            height: 100vh;
          }

Now let's add a background image.



body {
        background-image: url("Frosted Glass effect in CSS/assets/background.png");
     }

We can see image tiling here. To remove this we will use background-size: cover, also we don't want our image to repeat so we will use background-repeat: no-repeat;.



body {
        background-image: url("Frosted Glass effect in CSS/assets/background.png");
        background-size: cover;
        background-repeat: no-repeat;
      }

Now let's style our wrapper div. We will give it some height and width and also set its background to inherit¹ . To make it look better we will give it a border and border radius. We will also give it a position property so that when we create our overlay it doesn't cover the entire screen but fit inside our wrapper instead. In this case I am setting it to position: absolute.



.wrapper {
            height: 320px;
            width: 600px;
            background: inherit;
            border-radius: 15px;
            border: 1px solid rgba(43, 43, 43, 0.568);
            position: absolute;
    }

But the div background doesn't look so nice. Instead of the full background appearing inside our div, I want it to only take the part of image that's behind the div. For that we will give the background-attachment: fixed property to our body.



 body {
        background-image: url("Frosted Glass effect in CSS/assets/background.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
      }

Much better. Now comes the main part, we will now create an overlay using before pseudo-class to give our div the frosted glass effect.

NOTE:

For before pseudo-class to work we need to give it a content property. In our case since we don't want any content we will leave it to be empty(content: '').
It also requires a display property for it to have size and shape. To make things simple we will be giving it a position: absolute, so that it will fit inside its parent container(wrapper div).



.wrapper:before {
        position: absolute;
        content: '';
        background: inherit;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-shadow: inset 0 0 0 3000px rgba(150, 150, 150, 0.192);
        filter: blur(10px);
        border-radius: 15px;
      }

We are using box-shadow property to apply a grayish overlay and blur to blur that overlay. Also we are giving it a border radius similar to its parent for symmetry.

We can still see some unblurred edges though. To fix that we will first make the size of our overlay slightly bigger than the size of our wrapper and then set its left: -25px and top: -25px



.wrapper:before {
        position: absolute;
        content: '';
        background: inherit;
        height: 370px;
        width: 650px;
        left: -25px;
        right: 0;
        top: -25px;
        bottom: 0;
        box-shadow: inset 0 0 0 3000px rgba(150, 150, 150, 0.192);
        filter: blur(10px);
        border-radius: 15px;
      }

Lastly to make the edges clear and visible we need to set our wrapper div's overflow: hidden so that the part of overlay going outside our wrapper gets hidden.



 .wrapper {
        height: 320px;
        width: 600px;
        background: inherit;
        border-radius: 15px;
        border: 1px solid rgba(43, 43, 43, 0.568);
        position: absolute;
        overflow: hidden;
      }

For the final step, we will be using flexbox to center our div in our body.



body {
        background-image: url("Frosted Glass effect in CSS/assets/background.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
      }

Our frosted glass effect card is now ready. But there is one last problem we need to look at. If we try to write something inside our div wrapper, it goes behind the pseudo element and cannot be seen on top. To fix this issue we will have to create another div inside our frosted glass div, inside which we will put our content. Then we have to set the position of this content div to absolute.



    <div class="wrapper">
      <div class=content>
        <h1>Frosted Glass Effect</h1>
      </div>
    </div>



.content{
        position: absolute;
      }

Voila~

Our Frosted glass effect card is ready!

Method Two

The second method requires a lot lesser CSS but doesn't have a good browser support.

Image Source: Caniuse Website

For this we will create a wrapper div and apply a semi-transparent background color to it and then give it a backdrop-filter: property.



    <div class="wrapper">
        <h1>Frosted Glass Effect</h1>
    </div>



.wrapper{
        background: rgba(255, 255, 255, 0.192);
        backdrop-filter: blur(10px);
        height: 250px;
        width: 600px;
        border-radius: 15px;
        border: 1px solid rgba(43, 43, 43, 0.568);
      }

Tips for using Glassmorphism

First thing to keep in mind while using glassmorphism is to not overuse it or it may cause accessibility issues due to its blur and transparency. The effect looks best when used on only one or two elements!
To make the effect aesthetically pleasing make sure to use vivid and gradient colors as background. Avoid using monochrome backgrounds.
You can try experimenting with geometric elements. They will add a playful and attractive look to your page.

Glassmorphism can make a website or an app look more attractive, when used in the right way. It can improve UI accessibility so much, that the navigation gets easier even for people with visual problems. Take the best out of glassmorphism by playing around with it and having fun!