7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. CSS

Two Ways to Create a CSS Frosted Glass Effect

Read Time: 5 mins

In this tutorial I’ll show you how to create a frosted glass effect in CSS. You’ll already have seen this glass blur effect in action in UIs (User Interfaces) such as on MacOS and iOS, even Windows nowadays, so the glass background is definitely a trending effect.

Frosted glass, or glass blur, in websites may be emulated using CSS. In this tutorial I’ll show you two ways to do it.

CSS Frosted Glass Effect Explained

Method 1

The first method has quite wide browser support, but it requires more CSS than the second approach we’ll look at.

Begin by creating a div with a class of .container. We’ll use this to represent our frosted glass pane. Then, apply a background image to the body element. To this background you’ll need to apply:

We do this because children of the body inherits this background image and we want to keep it at the same size.

Create a pseudo element on our .container, that’s what’s going to give us the blurred glass. So, we apply the following:

This gives us an element that covers the container element. Now it’s time to add some colour, which we’ll do using a box-shadow:

And to give us a frosted effect, to blur glass, we add a blur filter:

This gives us most of what we want, but it’s not quite there yet. We now need (as we discussed earlier) to set an inherited background to both the pseudo element and its parent.

With a few more optional tweaks, here’s the end result:

Method 2

Now for an alternative blur glass method that uses a little less CSS background filter styling, but also enjoys less browser support.

We begin with the same .container element and apply the same cover background image to the body element.

Then we turn our attention to a CSS property called backdrop-filter. We begin by adding some display styles to our .container, including a background colour of whatever we like (let’s go for a pale white):

Then we add the filter (you might need to include the appropriate prefix for your browser, or just check autoprefixer if you’re in Codepen).

That’s it! Play around with the blur value to get the effect you want, but there’s nothing else needed. Here’s what that gives you:

Conclusion

If you're looking for a glass background effect that you can use in a webpage, then these two methods are a great place to start.

The downslide to using the second of these methods is the poor browser support. Right now you can expect css background filter support in Edge, and Safari, but that’s about it.

Still, as a CSS blur background, this frosted glass effect can be a very nice way of enhancing UIs for browsers that do support it.

Useful Links

More Excellent CSS Tutorials

If you've enjoyed this tutorial, there are plenty more to browse and read on Envato's Tuts+, the website that has thousands of How-to tutorials for, not only CSS, but for subjects across Design and Illustration, Code, Web Design, Photo and Video, Business, Music and Audio, 3D and Motion Graphics, Game Development and Computer Skills.

What's more, these tutorials are all free. Teach yourself new skills and brush up on existing knowledge from Envato's team of worldwide authors who help you to become expert in your interest area!

Explore More CSS Animations and Effects

CodeCanyon, part of Envato MarketCodeCanyon, part of Envato MarketCodeCanyon, part of Envato Market
CodeCanyon, part of Envato Market

If you head over to the CSS Animations and Effects section on CodeCanyon, part of Envato Market, you will see that there are currently over 140 different libraries related to CSS animations.

New libraries are added periodically to the collection, and you can select one from the best-sellers or apply your own filters to fine-tune the results.

There are libraries to animate all kinds of elements or apply different kinds of effects to elements like buttons.

--

Editorial Note: This post has been updated with contributions from Johnny Winter. Johnny is a staff writer with Envato Tuts+.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.