CSS Glassmorphism Effect in Squarespace

If you've come over from YouTube to grab the code for this video, then sorry. I had to revert back to sending it through the post.

If you've got no idea what I'm talking about then you SHOULD rewatch the video :)

Nah, just kidding. Here is the CSS to make the glassmorphism effect:

.glass-card-left {  
background: rgba( 255, 255, 255, 0.25 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 50px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
text-align: center;
padding: 50px; 
position: absolute; 
transform: rotate(0deg) translate(-50%);  left: 50%;
margin-top: 0% !important;
z-index: 0; 
}

As I mentioned in the video you'll need to style the mobile blocks independently from the desktop version. You can use magic, but I always find media queries work better ...and are magic in their own right.

Grab the CSS below and stick it in your CSS to sort the mobile side of things out.

.glass-card-left {  
background: rgba( 255, 255, 255, 0.25 );  
backdrop-filter: blur( 4px );  
-webkit-backdrop-filter: blur( 4px );  
border-radius: 50px;  
border: 1px solid rgba( 255, 255, 255, 0.18 );  
text-align: center; 
padding: 50px;  
position: absolute;  transform: rotate(0deg) translate(-50%);  
left: 50%;  
margin-top: 0% !important;  
z-index: 0; 
}

---

Show support