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 the Secrets to Supercharge Your Webflow Website

The newsletter with 0% spam, and 110% good tips and tricks.

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