Frosted glass on CSS
Tags: codenewbie, css, html
Published: 2021-09-17 20:17:03


Another week of learning something new! In this blog I am going to share with you how to make frosted glass just through CSS! There are a lot of variations you can do and that you can definitely find online. So let's go and explore together!

By the end of this blog, we should have something like Kyle Wetton's frosted glass on [CodePen](https://codepen.io/kylewetton/pen/bGbaazX):
![Kyle Wetton's Frosted Glass](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nfeninxqehh9dv4g4acv.png)

_Disclaimer: Some are currently not compatible with Firefox, Firefox android and Internet Explorer. Checkout our Glass 4 for a more broad browser compatibility_

So first of, let's make an html with all the elements we need. In my case, I wanted to make a mock login screen with that frosted glass design.
![HTML Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jp722arh4c34dh7ul91.png)

Now on our CSS file, we can apply our background-image to our 'body', adjust positioning and indicate the sizes you need then we'll get into the frosted glass.

There's a lot of ways to implement this. Below are what I've tried:

#### Glass 1
On your 'formDiv', you can apply backdrop-filter and box-shadow. In this case, box-shadow is inset with 200px spread with its shade and color opacity has been set. While backdrop-filter is set to blur at 8px. More of backdrop-filter on my next blog!

```CSS
-webkit-backdrop-filter: blur(8px);  /* Safari 9+ */
backdrop-filter: blur(8px); /* Chrome and Opera */
box-shadow: inset 0 0 0 200px rgba(255,255,255,0.08);
```
![Frosted glass 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93av4mcbqm19ikhr2cpn.png)<figcaption>We got our frost! This looks more likely of a frosted film than glass.</figcaption>

***

#### Glass 2
In this glass, we're setting the box-shadow darker, outset(the default by removing 'inset'), & less transparent, plus adding a background-color.
```CSS
-webkit-backdrop-filter: blur(8px);  /* Safari 9+ */
backdrop-filter: blur(8px); /* Chrome and Opera */
box-shadow: 0px 10px 15px 10px rgb(0 0 0 / 15%);
background-color: rgb(228 228 228 / 15%); 
```
![frosted Glass 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvxvf5ezwkfmisb74pij.png)<figcaption>The shadow gives it a bit more perspective. But still similar to our first one.</figcaption>

***

#### Glass 3
Another thing I have tried is using filter! but instead of using blur as the filter, I used drop-shadow with combination of background-color, and box-shadow(inset). 

```CSS
filter: drop-shadow(2px 4px 6px black);
background-color: rgb(152 151 151 / 25%); /* Just adjust the color or opacity to make the text pop! */
box-shadow: inset 0 0 0 200px rgb(255 255 255 / 8%);
```

![Frosted glass 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/guvcse6cnj1qvi35kuk8.png)
<figcaption>In this case, it will look more of a tinted glass than frosted glass.</figcaption>

***
#### Glass 4
Compatible with our IE and Firefox browsers!

```CSS
background: #969899; /* Definitely adjustable to what shade you like */
opacity: 0.6;
```

![Glass 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/120aco82g8vohp163lp1.png)

***
#### Glass 5

If play around with it until you get the blur you want and want to add a little spice, you can also attach another backdrop-filter and some border!

```CSS
backdrop-filter: grayscale(.8) blur(5px);
box-shadow: inset 0 0 0 200px rgba(255,255,255,0.08);

border-top: 2px solid rgba(225, 225, 225, 0.3);
border-left: 2px solid rgba(225, 225, 225, 0.1);
border-right: 1px solid rgba(225, 225, 225, 0.2);
```

![Glass 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ohshv57sazjr6pzdulo.png)<figcaption>See that grayscale take effect anything under the glass and the border gives it thickness!</figcaption>

Check out my CodePen for the final results!
{% codepen https://codepen.io/tolentinoel/pen/wvzbbEY %}

I had so much fun making this! I hope you did too!
Until the next!

**References/Links:**
- [CSS Tricks](https://css-tricks.com/frosting-glass-css-filters/) - Frosted Glass on CSS using filter()
- [Background photo](https://images4.alphacoders.com/114/1144182.jpg) - Vector Nature wallpaper
- Google Fonts used:
  - [Raleway](https://fonts.google.com/specimen/Raleway)
  - [Fredoka One](https://fonts.google.com/specimen/Fredoka+One)
- Inspiration in designing frosted glass : [Lennart Hase's CodePen](https://codepen.io/motorlatitude/pen/JFkro)