How To Create Gradient Page Sections in Squarespace 7.1

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

In this tutorial, I will show you how to create a gradient background section in your Squarespace 7.1 site.

Squarespace just released a brand new feature for page sections in version 7.1 called Section Divider.

I recorded a new tutorial, where you'll learn how to access these new design options and what your settings are.

I will show you how to change the background of the whole page - every section - and how to use a fancy code trick called a pseudo-class to identify individual sections so you can change the background separately.

The codes you need are below, but make sure you watch the tutorial so you know how to use them!

I also have a free guide to using gradients in Squarespace that you can check out here. It breaks down how to create a gradient code and has a few practice codes you can try!

Change the entire page background to a gradient:

.site-wrapper{background: linear-gradient(#000000, #50bdb8)!important;}

.page-section, .section-background{background:transparent!important;}

Change an individual section:

.page-section:nth-child(2){background: linear-gradient(30deg, #000000, #50bdb8)!important;}

.page-section:nth-child(2) .section-background{background-color:transparent!important}