A Guide To Adding a Gradient Effect to Your Squarespace Website

Don’t be like the average business owner who settles for the built-in Squarespace website dividers. In this article, I will show you the new and modern way to separate your sections. Here is how to add a gradient effect to your Squarespace website.

This is a low-code solution to adding this gradient effect, although I do recommend the SEO Space plugin to help you find the ID of your section. This saves me hours a week as a Squarespace designer.

Check Out The Video Version

What’s The Point Of Using A Gradient?

Adding a gradient effect offers the following benefits:
✅ Great flow between sections
✅ A more unique and modern look to the website (rather than the normal Squarepace website dividers).
✅ Custom colours to match your brand
✅ Completely customizable with easy CSS I will help you with.

Optional - Download Squarespace ID Finder

Squarespace ID Finder offers an easy way to find the ID of your section as seen below.

Step 2: Add the following code

1️⃣ Navigate to Custom CSS on the Squarespace website editor.
2️⃣ Copy the following code into this section:

css

#PASTE-SECTION-ID-HERE .section-background {

background: linear-gradient(to bottom, #6C6F7F, #1C0F13, #1C0F13) !important;

}

🔹 Using the Squarespace ID Finder or inspect, replace #PASTE-SECTION-ID-HERE with your own section ID
🔹 Replace #6C6F7F and #1C0F13 to your own colors using Google HEX Colour Picker

Final Thoughts

Adding a gradient effect to your Squarespace website is a great way to stand out from other websites on the internet. This is something I have really started taking advantage of with my Squarespace website design clients and would recommend it to anyone looking to move away from the basic dividers Squarespace offers.

If you have any questions check out my YouTube channel, or better yet message me on WhatsApp and I’ll be happy to answer as many questions as you have. If you would like me to take on a project, book a call here.

Thanks for reading along!