How to add a gradient background

This tutorial will show you how to create a gradient background to your website. This will work for Squarespace 7.1

A useful tool you can use to identify the #collection-id, #blockidnumber and section[data-section-id="#"] is a Chrome Extension called Squarespace ID Finder (https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff) which we fully recommend.

Complexity: Easy

---

Step 1

Identifiy the Section IDs for the section background using the plugin mentioned above

---

Step 2

To add the following CSS, go to ‘Design’ and the ‘Custom CSS’, paste the code into the Custom CSS editor box.

// Gradient Background Colour
section[data-section-id="64011318536cbb629a46d07a"] .section-background{
  background-color: #d23e70;
  background-image: linear-gradient(180deg, #d23e70, #382b7d);
}

---

Step 3

To change the gradient colours as well as the angle of orientation, you will need to edit this line of the CSS code.

background-color: #d23e70;
background: -webkit-linear-gradient(180deg, #d23e70, #382b7d);

---

You can also look at our “How to add gradient background to text” blog.

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.