How to create a frosted glass effect for a list item in Squarespace

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

One of my favorite CSS tricks is the frosted glass effect - showing a slightly transparent background that blurs the image behind it. In this tutorial, I’ll teach you how to create that effect for a list item in Squarespace.

In this Squarespace tutorial, you’ll learn how to create a frosted glass effect for a list item in Squarespace.

All the codes from this tutorial are below, BUT there are a few things you need to know:

→ This is specific for list page sections in version 7.1, an auto layout found under the people section.
→ There is more than one way to do this! Code is super customizable, and this is my technique.

Here are all the codes from this tutorial:

Be sure to adjust the blur and color code to suit your site style!

.list-item{
background: inherit!important;
background-color: rgba(255, 255, 255, .3)!important;
backdrop-filter: blur(5px)!important;
}