Blurry Glass Background

Blurry Glass Background

The trend of the futuristric blurry-glass background doesn't look like it's going away anytime soon, so why not embrace it?

Here's the code you'll want to add in the <head> of your project settings:

.glass {
background: rgba( 255, 255, 255, 0.10 );
box-shadow: 0 6px 32px 0 rgba( 31, 38, 135, 0.08 );
backdrop-filter: blur( 12.0px );
-webkit-backdrop-filter: blur( 12.0px );
border-radius: 100px;

The only other thing to do is add the "glass" class to any div you want the effect added too. That was so quick to do that you now have plenty of time to tweak it to your desire.

Download Assets
See an Example Website

Other Code Snippets

Ready to learn more?

I've worked with countless businesses around the world. Maybe you'll be next.

Get in Touch