How to create gradient backgrounds in Squarespace

page section

Jun 24

Want to give your Squarespace page a colorful twist? In this tutorial, you’ll learn how to add a gradient background to your entire site or just one specific section using custom CSS. This is a great trick for your Squarespace site if you want to create more visual interest without using images or overlays.

The video below walks you through the whole process step-by-step—and don’t worry, the code is listed below and totally beginner-friendly!

Watch the full video below, then scroll down to grab the code and follow the detailed steps!

Add a gradient background to the entire page

The code below uses the #page selector to add a gradient to the whole page, and sets the opacity of .section-border to 0 so the default backgrounds don’t cover the gradient.

/* gradient page background from insidethesquare.co */ 
 #page {
 background: linear-gradient(to bottom, pink, lightyellow);
 }
 #page .page-section .section-border {
 opacity: 0; 
 }

Add a gradient background to one page section

If you want to apply the gradient to just one section:

Use this free Squarespace ID Finder Chrome extension to locate the data-section-id
Replace the filler text from the code below with your unique data section id:

/* gradient page section from insidethesquare.co */ 
 section[data-section-id="YOUR-ID-HERE"] {
 background: linear-gradient(to bottom, pink, lightyellow);
 }
 section[data-section-id="YOUR-ID-HERE"] .page-section .section-border {
 opacity: 0; 
 }

Pro Tips

Use the Squarespace ID Finder Chrome extension to easily grab the correct section ID.
Swap out the colors pink and lightyellow with any values you like, or copy one directly from tmye Free Gradient Guide.
If your gradient isn’t showing up, double-check that the opacity is set to 0 for the section’s background container. That’s what lets the gradient show through!