How to Create Apple’s Liquid Glass in Squarespace

Jun 17

Apple's Liquid Glass style has been turning heads, but did you know you can create a similar look on your Squarespace site using just a little CSS? In this video tutorial, I’ll show you how to design beautiful blurred backgrounds that bring a soft, modern feel to your content.

Watch the full tutorial below, then scroll down to grab the codes and see how you can style content blocks, list sections, and even dropdown folders with this subtle-yet-stunning effect.

Liquid Glass Content Block

Use this code to add the border and blurry background to all content blocks on your site. Want to target one at a time? Use the block id! Check out this article for more info: insidethesquare.co/squarespace-id-finder

Get the chrome extension here: insidethesquare.co/chromeext

/* liquid glass content block from insidethesquare.co */
.sqs-block {
background: inherit!important;
background-color: rgba(255, 255, 255, .3)!important;
backdrop-filter: blur(5px)!important;
border:1px solid #fff;
padding: 5px;
border-radius:10px;
}

Liquid Glass List Item

Use this code to apply the liquid glass effect to items in a list section, sometimes called a People section. Since these aren’t standard content blocks, they don’t have block IDs, but this code targets them all with the same sleek blur and border styling.

/* liquid glass list item from insidethesquare.co */
.list-item {
background: inherit!important;
background-color: rgba(255, 255, 255, .3)!important;
backdrop-filter: blur(5px)!important;
border:1px solid #fff;
padding: 5px;
border-radius:10px;
}
.list-item *{
color: #fff!important
}

Liquid Glass Dropdown

This snippet adds the glassy background and blur to your dropdown menu folder. It’s a subtle but stunning touch that brings modern style to your site navigation—even when block IDs aren’t available.

/* liquid glass dropdown from insidethesquare.co */
.header-nav-folder-content  {
background: inherit!important;
background-color: rgba(255, 255, 255, .3)!important;
backdrop-filter: blur(5px)!important;
border:1px solid #fff;
padding: 5px;
border-radius:10px;
}

imagebackground