Two Ways to Create a CSS Frosted Glass Effect

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

FREE

12 Minutes

How to Create a Frosted Glass Effect in CSS

Learn how to create a frosted glass effect in CSS in two different ways in this quick video. 

    Method 1

    The first method requires a bit 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:

    1
    body {
    
    2
        background-attachment: fixed;
    
    3
    }
    

    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:

    1
    .container:before {
    
    2
        content: '';
    
    3
        position: absolute;
    
    4
        top: 0;
    
    5
        left: 0;
    
    6
        right: 0;
    
    7
        bottom: 0;
    
    8
    }
    

    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:

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

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

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

    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.

    1
    .container {
    
    2
        background: inherit;
    
    3
    }
    
    4
    
    
    5
    .container:before {
    
    6
        background: inherit;
    
    7
    }
    

    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.

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

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

    Then we add the filter (you might want tocheck autoprefixer if you’re in Codepen).

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

    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:

    Browser support for CSS Backdrop Filter is excellent these days.

    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.

    As mentioned, browser support for both methods is solid nowadays, so as a CSS blur background, this frosted glass effect can be a very nice way of enhancing UIs and leaning into glassmorphism.

    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.

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

    FREE

    12 Minutes

    How to Create a Frosted Glass Effect in CSS

    Learn how to create a frosted glass effect in CSS in two different ways in this quick video. 


      Method 1

      The first method requires a bit 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:

      1
      body {
      
      2
          background-attachment: fixed;
      
      3
      }
      

      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:

      1
      .container:before {
      
      2
          content: '';
      
      3
          position: absolute;
      
      4
          top: 0;
      
      5
          left: 0;
      
      6
          right: 0;
      
      7
          bottom: 0;
      
      8
      }
      

      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:

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

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

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

      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.

      1
      .container {
      
      2
          background: inherit;
      
      3
      }
      
      4
      
      
      5
      .container:before {
      
      6
          background: inherit;
      
      7
      }
      

      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.

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

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

      Then we add the filter (you might want tocheck autoprefixer if you’re in Codepen).

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

      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:

      Browser support for CSS Backdrop Filter is excellent these days.

      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.

      As mentioned, browser support for both methods is solid nowadays, so as a CSS blur background, this frosted glass effect can be a very nice way of enhancing UIs and leaning into glassmorphism.

      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.


      Print Share Comment Cite Upload Translate
      APA
      Adi Purdila | Sciencx (2024-03-29T12:00:39+00:00) » Two Ways to Create a CSS Frosted Glass Effect. Retrieved from https://www.scien.cx/2019/01/09/two-ways-to-create-a-css-frosted-glass-effect/.
      MLA
      " » Two Ways to Create a CSS Frosted Glass Effect." Adi Purdila | Sciencx - Wednesday January 9, 2019, https://www.scien.cx/2019/01/09/two-ways-to-create-a-css-frosted-glass-effect/
      HARVARD
      Adi Purdila | Sciencx Wednesday January 9, 2019 » Two Ways to Create a CSS Frosted Glass Effect., viewed 2024-03-29T12:00:39+00:00,<https://www.scien.cx/2019/01/09/two-ways-to-create-a-css-frosted-glass-effect/>
      VANCOUVER
      Adi Purdila | Sciencx - » Two Ways to Create a CSS Frosted Glass Effect. [Internet]. [Accessed 2024-03-29T12:00:39+00:00]. Available from: https://www.scien.cx/2019/01/09/two-ways-to-create-a-css-frosted-glass-effect/
      CHICAGO
      " » Two Ways to Create a CSS Frosted Glass Effect." Adi Purdila | Sciencx - Accessed 2024-03-29T12:00:39+00:00. https://www.scien.cx/2019/01/09/two-ways-to-create-a-css-frosted-glass-effect/
      IEEE
      " » Two Ways to Create a CSS Frosted Glass Effect." Adi Purdila | Sciencx [Online]. Available: https://www.scien.cx/2019/01/09/two-ways-to-create-a-css-frosted-glass-effect/. [Accessed: 2024-03-29T12:00:39+00:00]
      rf:citation
      » Two Ways to Create a CSS Frosted Glass Effect | Adi Purdila | Sciencx | https://www.scien.cx/2019/01/09/two-ways-to-create-a-css-frosted-glass-effect/ | 2024-03-29T12:00:39+00:00
      https://github.com/addpipe/simple-recorderjs-demo