DEV Community

Cover image for Frosted glass on CSS
Ellaine Tolentino
Ellaine Tolentino

Posted on • Updated on

Frosted glass on CSS

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:
Kyle Wetton's Frosted Glass

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

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!



-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);


Enter fullscreen mode Exit fullscreen mode

Frosted glass 1
We got our frost! This looks more likely of a frosted film than glass.


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.



-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%); 


Enter fullscreen mode Exit fullscreen mode

frosted Glass 2
The shadow gives it a bit more perspective. But still similar to our first one.


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).



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%);


Enter fullscreen mode Exit fullscreen mode

Frosted glass 4

In this case, it will look more of a tinted glass than frosted glass.

Glass 4

Compatible with our IE and Firefox browsers!



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


Enter fullscreen mode Exit fullscreen mode

Glass 4


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!



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);


Enter fullscreen mode Exit fullscreen mode

Glass 5
See that grayscale take effect anything under the glass and the border gives it thickness!

Check out my CodePen for the final results!

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

References/Links:

Top comments (13)

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

We can do more than just blur 😉

Collapse
 
tolentinoel profile image
Ellaine Tolentino

I just saw your work! and wow! Thank you for sharing! Definitely will experiment more!

Collapse
 
steelwolf180 profile image
Max Ong Zong Bao

Wow that's really cool, CSS has really come a long way.

Collapse
 
tolentinoel profile image
Ellaine Tolentino

Thank you! and yes, it has come a long way! The learning continues!

Collapse
 
alirezahekmati profile image
alirezahekmati

hey it was really helpfull

thank you

and last thing to say ,people like you are the reson why human move toward better path

Collapse
 
tolentinoel profile image
Ellaine Tolentino

Thank you for your kind words! Glad its helpful for you!

Collapse
 
manuelricci profile image
Manuel Ricci

Nice work. A little improvement would be a fallback for the poor Firefox that doens't support backdrop yet

Collapse
 
tolentinoel profile image
Ellaine Tolentino

Agreed! Thank you!

Collapse
 
elfsternberg profile image
Eλf Sternberg

Unfortunately, until this is supported in all browsers, it's not of much use, and Firefox doesn't show anything at all.

Collapse
 
tolentinoel profile image
Ellaine Tolentino

Thanks, I'll update this with a disclaimer.

Collapse
 
laerciolopesll profile image
LaercioLopesLL

I love it!

Collapse
 
benjamincullendev profile image
Benjamin Cullen

I love how this looks. I'll be having ago on my next project.

Collapse
 
tolentinoel profile image
Ellaine Tolentino

Thank you! and Yay! I'm glad you like it!