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