Adding a Gradient Background to Squarespace

A gradient background is an easy way to show a bit of style and give and extra bit of flare to your Squarespace site (affiliate link, free trial).

I’m going to give you the exact code that you need to make this happen – but before I do, you need to make sure that you are taking advantage of index pages in one of the Brine family templates.

That’s where we are adding this gradient – into a page that is acting as a section of a larger whole in an index page. (For more info on index pages, head over to the SquareSpace support page all about them here.)

Adding your code

You’ll be adding your CSS code under Design -> Custom CSS

This is the code that you need:

#URL-slug {background: linear-gradient(180deg, #COLOR 5%, #COLOR 90%);}

This is what you’ll need to modify: 

1. #URL-slug is the page slug where you want the background to be added. You find this in the page settings of an index page.
2. #COLOR will be the HEX code of the colors you want to use in your gradient. Pick two that complement each other – one lighter, one darker and tweak them until you like the look of the gradient

And oila! Now you have a gradient background. That wasn’t so hard, right?

Best of luck! Xx, Kara

---

Ready for more?

Be sure to check out and subscribe to my YouTube channel. You can also view SkillShare courses (and a free two-week trial) here.

Sign up for services mentioned in post:

Squarespace ➡️ https://guidedonline.com/squarespace

Affiliate links! I only promote services that I have used myself, regardless of whether I have an affiliate account with them, and using affiliate links when available helps me to continue to provide useful information at no cost to my viewers/readers/peeps. Thank you 🥰