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:

body {
    background-attachment: fixed;
}

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:

.container:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

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:

.container:before {
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
}

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

.container:before {
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
    filter: blur(10px);
}

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.

.container {
    background: inherit;
}

.container:before {
    background: inherit;
}

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

.container {
 background-color: rgba(255, 255, 255, .15);   
}

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

.container {
 background-color: rgba(255, 255, 255, .15);  
 backdrop-filter: blur(5px);
}

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.

• 
  CSS
  Having Fun With Tomorrow’s CSS: Backdrop Filters
  Louie Rootfield

• 
  CSS Grid Layout
  Create a CSS Grid Image Gallery (With Blur Effect and Interaction Media Queries)
  Ian Yates

• 
  CSS
  How to Apply Instagram Filters in the Browser Using Pure CSS
  Adi Purdila

Useful Links

• CodePen Demo Method 1
• CodePen Demo Method 2
• CSS Filters
• CSS Backdrop Filter
• Demo Photo from Unsplash

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!

• 

  30 CSS Best Practices for Beginners

  CSS is a language that is used by nearly every developer at some point. While it’s a language that we sometimes take for granted, it is powerful and has many…
• 

  How to Create 9 Different CSS Hover Effects From Scratch

  In this updated tutorial, we’re going to create seven different CSS hover effects and two additional ones that will require a little JavaScript. We’ll learn…
• 

  Create Beautiful Scrolling Animations With the CSS Clip-Path Property

  In this tutorial we’ll use modern front-end features like CSS Grid, clip-path property, and the Intersection Observer API to build a cool scroll effect that…
• 

  Quick tip: How to Make Elements Resizable with CSS Resize

  In today’s quick tip video you’ll learn how to make elements resizable with CSS, just by using a property called (drumroll please) resize.

Explore More CSS Animations and Effects

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