DEV Community

Khushboo Chaturvedi
Khushboo Chaturvedi

Posted on

Frosted Glass Effect in CSS

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>

Enter fullscreen mode Exit fullscreen mode

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;
          }
Enter fullscreen mode Exit fullscreen mode

Now let's add a background image.

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

image tiling

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;
      }
Enter fullscreen mode Exit fullscreen mode

background image cover

Now let's style our wrapper div. We will give it some height and width and also set its background to inherit1 . 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;
    }
Enter fullscreen mode Exit fullscreen mode

wrapper 1

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;
      }
Enter fullscreen mode Exit fullscreen mode

wrapper 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;
      }
Enter fullscreen mode Exit fullscreen mode

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.

overlay 1

overlay zoom

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;
      }
Enter fullscreen mode Exit fullscreen mode

edge correction 1

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;
      }
Enter fullscreen mode Exit fullscreen mode

edge correction 2

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;
      }
Enter fullscreen mode Exit fullscreen mode

flexbox 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>
Enter fullscreen mode Exit fullscreen mode
.content{
        position: absolute;
      }
Enter fullscreen mode Exit fullscreen mode

Final card

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.

method 2 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>
Enter fullscreen mode Exit fullscreen mode
.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);
      }
Enter fullscreen mode Exit fullscreen mode

method 2

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!

Reference Links


  1. Which will make it inherit the background of its parent(body) 

Top comments (12)

Collapse
 
dynamo0077 profile image
Rishi Choubey

Wow amazing

Collapse
 
khush2706 profile image
Khushboo Chaturvedi

Thankyou😊

Collapse
 
dinniej profile image
Nguyen Ngoc Dat

Noice

Collapse
 
khush2706 profile image
Khushboo Chaturvedi

Thanx!!

Collapse
 
anjalikumawat2002 profile image
Anjali Kumawat

Nice explaination 🤩🔥

Collapse
 
khush2706 profile image
Khushboo Chaturvedi

Thankyou😊

Collapse
 
jkprasad profile image
jkprasad

Your style of explanation introducing styling details gradually made it easy to understand. Keep it up!

Collapse
 
khush2706 profile image
Khushboo Chaturvedi

Thanks a lot!

Collapse
 
sgtrock152 profile image
Smithson52

Love frosted glass! Thanks for the excellent breakdown of it all ☺️

Collapse
 
khush2706 profile image
Khushboo Chaturvedi

Thankyou😊

Collapse
 
posandu profile image
Posandu

You should also activate Windows. XD

Collapse
 
khush2706 profile image
Khushboo Chaturvedi

Haha sure😂