How To Create A Gradient Page Section Background in Squarespace

Gradients are a fantastic way to elevate the style of a Squarespace website, but they aren’t easy to create using the Squarespace design menus.

In this tutorial blog post, you’ll learn how to add a gradient background to your Squarespace site using simple CSS code.

I will show you how to change the background of the whole page - every section - and how to use a unique collection ID to identify individual sections so you can change the background separately.

The codes you need are below, but 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!

This code will create a gradient background for standard pages on your Squarespace site.

The first part adds the gradient to the site wrapper, the lowest layer of content. The second part makes standard page sections and their section borders transparent, allowing the the site wrapper gradient to shine through.

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

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

This code will create a gradient background for an individual page section on your Squarespace site.

To use this code, you’ll need to replace the filler text [data-section-id] with the actual data section id for each individual section if you are new to the concept of using a data section id, check out the information in the next section of this article.

Pro tip: make sure there is no space between the final bracket of your data section id and the period symbol for the page section selector class.

[data-section-id].page-section .section-background {
background: linear-gradient(#000000, #50bdb8)!important
}

[data-section-id].page-section .section-border{
background:transparent!important
}