Creating a frosted glass effect using CSS is a better method than the old javascript hacks. Using CSS to create the frosted effect uses fewer resources from the site visitors computer by using the native browser rendering engine.
To test this just drag the frosted glass example in the top right of this page.
Ok, without wasting much of your time I’m going to jump straight into it.
The main components used for a classic frosted glass effect are:
- > The original content
- - - > The frosted glass container ( Exp. <div> )
- - - - - > Original content copy inside the glass container (the element that mimics the content on the page with a blur effect).
For a basic idea of how this works. Here is a simple example:
HTML structure:
<body>
<div id="frosted-glass-mask" >
<div id="body-content-clone" ></div>
</div>
</body>
The CSS:
body{
width: 100vw;
height: 900px;
background-image: url( background-image.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
#frosted-glass-mask{
width: 500px;
height: 500px;
overflow: hidden;
position: absolute;
border: #ffffff63 solid 2px;
left: 40px;
top: 40px;
box-shadow: 6px 7px 5px #00000075;
}
#body-content-clone{
position:absolute;
left: -40px;
top: -40px;
width: 1000px;
height: 1000px;
background-image: url( background-image.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
filter: blur(10px);
}
In this example, I’m setting the background-attachment as fixed, so the backgrounds for the body and the #body-content-clone element align to the top of the window. This way, we won’t have to worry about aligning the clone element with the original, and won’t have to use complicated CSS alignments or javascript to align the elements.
In order to create the frosted effect, we are basically mimicking the original content with the #body-content-clone, aligning it, and sizing it on top of the original content.
Once we have the content lined up with the content clone, we can apply the blur filter effect on the #body-content-clone{ filter: blur(5px) } .
Lastly; “#frosted-glass-mask”, the parent div of the cloned content, acts as the glass element masking the content inside it.
For added detail you can use the psesudo “:after” and/or “:before” to add inside shadows, highlights and whatever else you want to style the content to your liking.
As always, it’s up to you to get creative.
Try it and let me know how you liked this quick tutorial blog, and if you end up using it in your project, please share a link in the comments to see your work.
Happy coding!