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

Learn How to Turn More Website Traffic into Customers in Just 5 Days

Trusted by hundreds of businesses around the world.

Nice! You're in the loop. Talk soon.
Oops! Something went wrong while submitting the form.