How to create frosted glass effect for a blog post grid in Squarespace 7.1

Nov 17

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

This tutorial will show you how to create a frosted glass effect over a blog summary in your Squarespace site.

A few important things to note before you copy and paste this into your own site:

There is more than one way to do this! This is just one approach of many because code is super customizable.
Be sure to edit the code to suit your own site style, trying different blur options, adjust those margins, padding, and more.
This code is specifically for Squarespace 7.1 blog post pages.
You can apply this to a single page using page header code injection or an on page code block. Check out this tutorial for more info on that.
If you need some help with this tutorial, feel free to submit a help request here.

Download Transcript

Here is the non-hover effect code from this tutorial.

The parts you can customize are in bold below:

.blog-basic-grid .blog-basic-grid--text {
position: absolute; background: inherit;
margin-left:5%;
margin-right:auto;
width: 90%;
height: 70%;
margin-top: 12.5%;
background-color: rgba(255, 255, 255, .3);
backdrop-filter: blur(5px);
border-radius: 10px; }

.blog-basic-grid--text *{padding: 0 .2rem 0 .2rem}

And here is the hover effect version:

.blog-basic-grid .blog-basic-grid--text {
position: absolute; background: inherit;
margin-left:5%;
margin-right:auto;
width: 90%;
height: 70%;
margin-top: 12.5%;
background-color: rgba(255, 255, 255, .3);
backdrop-filter: blur(5px);
border-radius: 10px; }

.blog-basic-grid--text *{padding: 0 .2rem 0 .2rem}

@media only screen and (min-width:640px){ .blog-basic-grid--text:hover{ backdrop-filter: blur(0px); background-color: rgba(255, 255, 255, .5); } .blog-basic-grid--container:hover { box-shadow:5px 5px 10px #ccc; transition:1s} .blog-article-spacer{display:none}}