Squarestuff

Share this post

CSS Glassmorphism Effect in Squarespace

www.carljohnson.space

CSS Glassmorphism Effect in Squarespace

Carl Johnson
Jan 2
Share this post

CSS Glassmorphism Effect in Squarespace

www.carljohnson.space

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; 
}

Thanks for reading Squarestuff! Subscribe for free to receive new posts.

Share this post

CSS Glassmorphism Effect in Squarespace

www.carljohnson.space
Previous
Next
Comments
TopNew

No posts

Ready for more?

© 2023 Carl Johnson
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing