Squarestuff

Share this post

CSS Glassmorphism Effect in Squarespace

www.carljohnson.space

Discover more from Squarestuff

Web development, motion graphics and all kind of other ...stuff!
Continue reading
Sign in

CSS Glassmorphism Effect in Squarespace

Carl Johnson
Jan 2, 2023
Share this post

CSS Glassmorphism Effect in Squarespace

www.carljohnson.space
Share

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

Buy me a coffee

Share this post

CSS Glassmorphism Effect in Squarespace

www.carljohnson.space
Share
Previous
Next
Comments
Top
New
Community

No posts

Ready for more?

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